Vue 计算的值

计算的值

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。

计算值会根据所依赖的其它变量的变化而响应式的输出结果。依赖值变化的时候，计算值也会相应的改变。

<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: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})      

缓存（计算值与方法的不同）

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

method:{
    getTimeNow(){
        return Date.now()
    }
}