Vue中计算属性computed的运用及理解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_43851769/article/details/86222253

Vue中计算属性computed的运用及理解

一.什么是计算属性：
计算属性是Vue中定义的一种方法，适用于任何复杂的逻辑。
基本格式为:

{ [key: string]: Function | { get: Function, set: Function } }

在使用计算属性时默认只有 getter ，不过在需要时你也可以提供一个setter

他的作用是监听所设定的，当监听到数据发生变化后驱动
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

需要注意的是：
如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，
这个时候this指向了Vue这个构造函数最外层的对象：{ }（这个最外层的大括号）
不过你仍然可以将其实例作为函数的第一个参数来访问。

二.计算属性的用法
这里首先列出一个官方文档中的示例：

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: { message: 'Hello' },
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
上面代码输出的结果为：

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

根据上面的结果可以看出最开始vm.reversedMessage的结果是根据data里面message的初始值计算的
但接着我们改变了message这个值，当我们再次来看vm.reversedMessage的结果时你会发现它也发生了改变。
总结：vm.reversedMessage 的值始终取决于 vm.message 的值。
三.计算属性的特性

1. 缓存机制

   那么如果我将message这个值再改变成初始的hello，那么结果肯定和上面第一次的结果是一样的，但是这里要说的是，计算属性具有缓存机制

   每一次你的计算结果都会被缓存，所以这一次实际上不是重新进行了计算，而是直接调用了缓存中的结果并显示了出来。除非依赖的响应式属性变化才会重新计算。

2. 监听属性

   在上面的示例中我们看到vm.reversedMessage 的值会随着message的改变而改变

   这是因为计算属性具有监听属性，当数据发生变化时就会驱动计算，从而返回相应的结果。

   当你有一些数据需要随着其它数据变动而变动时就可以使用计算属性