操作 vue.js基础-计算机属性

计算机属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

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

在模板中放入逻辑会影响加载速度，使得模板不再简单和清晰，对于任何复杂逻辑，你都应当使用计算属性

例子

HTML代码：

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

JavaScript代码：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    //声明了一个计算属性 reversedMessage
    reversedMessage: function () {
      // 这里的this指向vue实例本身
      return this.message.split('').reverse().join('')
    }
  }
})

结果：

Original message: “Hello”
Computed reversed message: “olleH”

vm.reversedMessage 的值始终取决于 vm.message 的值。

vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。

计算属性与method的比较

上面的功能我们通过method也可以实现

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

//定义为一个 method
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

我们可以将同一函数定义为一个 method 而不是一个计算属性。
两种方式结果是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

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

computed: {
  now: function () {
    return Date.now()
  }
}

两种方式在缓存上也大有不同，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式