Vue - computed 和 methods 区别

示例：

<div id="app">
  <h4>method 方式</h4>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h4>compute 方式</h4>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

computed: {
      fullName: function () {
        console.log('compute')
        return this.firstName + ' ' + this.lastName
      }
    },
methods: {
      getFullName() {
        console.log('methods')
        return this.firstName + ' ' + this.lastName
      }
}

　　

执行时 method 会被执行三次，包括修改firstName操作；computed 只会执行一次，便被缓存起来，包括修改firstName时。

故推荐使用 computed 方式来表达 复杂属性情况。