计算属性

129 阅读1分钟

computed 

响应式getter

例子:

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

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

会缓存数据,只要message不改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。