初识Vue——计算属性和观察者

vue

一、计算属性

在模板内使用

1、基础例子 

<template>

<div class="main">

<div >

<p>原始字符串:{{ msg }}</p>

<p>倒置字符串:{{ reversedmsg }}</p>

</div>

</div>

</template>

<script>

export default {

name: 'test',

data () {

return {

msg: '梦里梦到醒不来的梦',

}

},

computed: {
//计算属性的getter

reversedmsg: function () {

return this.msg.split('').reverse().join('')

}

}

}

</script>

<style>

#reverse_str{

color: powderblue;

}

</style>

解释说明:这里我们声明了一个计算属性reversemsg,我们提供的函数将用作属性的getter函数

2、计算属性缓存vs方法

以上还可以通过在表达式中调用方法来达到同样的效果:

<template>

<div class="main">

<div >

<p>原始字符串:{{ msg1 }}</p>

<p>倒置字符串:{{ reversedmsg1() }}</p>

</div>

</div>

</template>

<script>

export default {

name: 'test',

data () {

return {

msg1: '浮现你被软禁的红'

}

},

methods: {

reversedmsg1 () {

return this.msg.split('').reverse().join('')

}

}

}

</script>

<style>

#method{

color: darksalmon;

}

</style>

    

这两种方式的结果是一模一样的;不同的是,计算属性是基于他们的依赖进行缓存的;计算属性只有在他的相关依赖发生改变时,才会重新求值;这就意味着只要msg没有发生改变,多次访问reversemsg计算属性会立即返回之前计算的结果,而不必再次执行函数;

这也意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖,

computed: {

// 计算属性的getter

now_time: function () {

return Date.now()

}

},

3、计算属性VS侦听属性

侦听属性:观察和相应Vue实例上的数据变动;watch回调

<template>

<div class="main">

<div >

      <div class="watch_it">
        <input v-model="first" />
        <input v-model="last" />
        <p>{{ fullname }}</p>
      </div>

        </div>

</div>

</template>

<script>

export default {

name: 'test',

data () {

return {

sangname: '我如果爱你——',

author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',

}

},

watch: {

first: function (val) {

this.fullname = val + ' ' + this.last

},

last: function (val) {

this.fullname = this.first + ' ' + val

}

}

}

</script>

<style>

.watch_it input{

list-style: none;border: 1px seagreen solid;width: 200px;height:30px;color: gray;padding:0 10px;outline: none;

}

</style>

上面的代码是命令式的,且重复代码较多,下面来写一下计算属性的版本:

<template>

<div class="main">

<div >

<p>{{ sang }}</p>

</div>

</div>

</template>

<script>

export default {

name: 'test',

data () {

return {

sangname: '我如果爱你——',

author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',

},

computed: {

// 计算属性的getter

sang: function () {

return this.sangname + ' ' + this.author

}

}

}

</script>

<style>

#sang{

color: cadetblue;

}

</style>

     

4、计算属性的setter

计算属性只有默认的getter,不过在必要的时候你可以自定义一个setter

<template>

<div class="main">

<div >

<p>{{ sang }}</p>

</div>

</div>

</template>

<script>

export default {

name: 'test',

data () {

return {

sangname: '我如果爱你——',

author: '绝不学痴情的鸟儿,为绿荫重复单调的歌曲',

}

},

computed: {

sang: {

//getter

get: function () {

return this.sangname + ' ' + this.author

},

set: function (newval) {

var sentence = newval.split(' ')

this.sangname = sentence[0]

this.author = sentence[sentence.length - 1]

}

}

}

}

</script>

<style>

#sang{

color: cadetblue;

}

</style>

 二、侦听器

虽然计算机属性可以适用于大多数情况,但有时也需要一个自定义的侦听器;

暂无

以上是 初识Vue——计算属性和观察者 的全部内容, 来源链接: utcz.com/z/377899.html

回到顶部