vue：计算属性（computed）

版权声明：转载请注明出处 https://blog.csdn.net/fly_distance/article/details/84996991

一、计算属性？什么东东？？

不废话，先看代码：

<div id="example">
{{ message.split('').reverse().join('') }}
</div>

上面{{}} 内是可以写表达式的，但是一般会写一些简单的表达式。太复杂的话，可读性比较差，难以维护。
所以，vue提供了计算属性这个东西，即我们所说的computed。

特点：计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算（这点详细作用可以对比文中第三点）

二、怎么用腻？

首先要知道计算属性里用来完成各种复杂逻辑（运算、函数调用等），只要最终返回一个结果即可。computed里有getter和setter，getter用来读取，当手动修改属性值时触发setter。

讲的啥，我也不明白。。。那我们看例子吧：

<div id="example">
<p>{{ reversedMessage }}</p>
<p>{{splitMessage}}</p>
</div>

var vm = new Vue({
data: {
message: 'Hello'
},
computed: {
// 读取和设置
splitMessage: {
//getter用于读取
get: function () {
return this.message.split('').join('-')
},
//setter写入时触发
//（什么时候会触发？？当我们在代码中改变this.message值得时候，就会触发setter和getter，比如：执行this.message = 'world'时）
set: function (newValue) {
this.message = newValue
}
}，
// 仅读取（一般情况下，我们只会用默认的getter方法，所以可以简写如下）
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

在此，只要会用默认getter，问题就不大。

三、对比methods

在表达式中调用methods中的方法，同样可以达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}

那我们直接用methods就好了呗，vue为何还要创建computed呢？问得好！
因为methods这种方法，值是实时更新的，当页面组件刷新或者执行

this.message = 'world'

等等，反正只要重新渲染，函数就会重新被执行。
然鹅，computed只有在依赖的实例数据改变时，才会更新（即所说的缓存）。那即使重新渲染，只要this.message的值不发生变化，computed里面getter就不会重新执行。所以当处理大量数据的时候，使用计算属性，而不是方法，这样会提高性能。

四、对比watch

当this.message发生变化时候，触发setter、getter。好似监听、于是我们想到了watch。那他们的区别在哪呢？
例子：

<div id="myDiv">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<input type="text" v-model="fullName">
</div>

computed：

//这里不用再data中声明fullName
new Vue({
el:"#myDiv",
data:{
firstName:"Foo",
lastName:"Bar",
},
computed:{
fullName:function(){
return  this.firstName  + " " +this.lastName;
}
}
})

watch：

new Vue({
el: '#myDiv',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})

从上面我们可以总结出：

• computed是计算属性，是依赖其它的属性

  计算所得出最后的值

  。watch是去监听

  一个值

  的变化，然后执行相对应的函数，watch支持异步。
• computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，

  下一次

  获取computed的值时才会重新调用对应的getter来计算。watch在

  每次监听的值变化时，都会执行

  回调。其实从这一点来看，都是在依赖的值变化之后，去执行回调。很多功能本来就很多属性都可以用，只不过有更适合的。如果一个值依赖多个属性（多对一），用computed肯定是更加方便的。如果一个值变化后会引起一系列操作，或者一个值变化会引起一系列值的变化（一对多），用watch更加方便一些。
• watch的回调里面会传入监听属性的

  新旧值

  ，通过这两个值可以做一些特定的操作。computed通常就是简单的计算。

说了这么多，其实我们可以简单理解为：

1、当我们想的值是实时更新的，我们用methods
2、当我们想要计算后的属性值，依赖于其他数据变化才更新，我们用computed
2、当依赖数据发生变化后，我们还要做其它的一些事情，我们用watch

#end
原文链接