vue的计算属性与监听器

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

vue模板表达式里面是支持使用js表达式的，例如下面

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

但如果这样使用了，模板不在是简单的声明式逻辑，阅读起来不在变得愉悦，我们要分析一下才能知道上面表的是将message反转。

    我们要降低模板的复杂性，所有的需要复杂表达式的地方需要使用计算属性。

下面是计算属性的基本示例：

<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('') } } })

这里声明了一个计算属性( computed)：

reversedMessage这里提供的函数将用作属性vm.reversedMessage的getter函数：

我们修改message的值，reversedMessage 依赖于vm.message，vm.message值改变，reversedMessage也会更新。


 计算属性缓存vs方法

上面我们也可以使用方法，会有与上面同样的效果，不同的是计算属性是基于他们的依赖进行缓存的，计算属性只有在它的

相关依赖发生改变时才会重新求值，，这就意味着只要message没有改变，多次访问reversedMessage ，计算属性会立即返回之前的计算结果，而不必再次执行函数。

使用计算缓存的目的是为了避免较大型计算重复计算。