计算属性VS计算方法

计算属性VS计算方法

在vue中在模板中绑定表达式是非常方便的，但是他们实际只是用于简单的操作，如果在模板中绑定过多的逻辑就会变得难于维护。

例如

<div id="example">
  {{ message.split('').reverse().   ('') }}
</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: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

切记：计算属性是根据依赖缓存的，如果依赖不发生改变，它不会再执行函数，还是返回之前的结果。例如：

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

计算方法methods:它也能达到computed实现的效果，但是计算属性不会缓存，每调用一次，函数执行一次。

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

methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}