Vue.js 计算属性

为什么需要计算属性?

模板内的表达式应当只作简单的运算，防止模板过重且难以维护。

所以，例如：

 
 

  
  <div id="example">
 
 
 
 

  
    {{ message.split('').reverse().join('') }}
 
 
 
 

  
  </div>
 
 

这类逻辑，需要多次确认，导致模板不再简单和清晰。

什么是计算属性？

 
 

  
  <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: {
 
 
 
 

  
      // a computed getter
 
 
 
 

  
      reversedMessage: function () {
 
 
 
 

  
        // `this` points to the vm instance
 
 
 
 

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

  
      }
 
 
 
 

  
    }
 
 
 
 

  
  })
 
 

在computede中声明了reversedMessage，即声明了一个计算属性reversedMessage。

我们提供的函数将用作属性vm.reversedMessage的getter。

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

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

计算属性vs Methods

通过调用表达式中的method可以达到同样的效果：

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

 
 

  
  // in component
 
 
 
 

  
  methods: {
 
 
 
 

  
    reversedMessage: function () {
 
 
 
 

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

  
    }
 
 
 
 

  
  }
 
 

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

相比而言，只要发生重新渲染，method调用总会执行该函数。

计算属性使用场合：不是直接使用浏览器刷新页面，改变数据、DOM操作等引起页面重新渲染时，计算属性会直接使用缓存，不会重新执行函数。适合计算量很大且改变频率低的属性。适用于对多数据变动进行监听，维护一个状态。