VueJS-计算属性

在VueJS中，计算属性是一种带有特定函数的属性，这个函数用来处理数据并返回数据。

定义计算属性

计算属性可以通过Vue实例里的computed选项进行定义。例如：

new Vue({
  computed: {
    // 计算属性的函数
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

在上面的例子中，computed对象里定义了一个名为fullName的计算属性，其值调用了一个函数，这个函数的返回值为firstName和lastName的字符串拼接。

使用计算属性

一旦定义了计算属性，我们可以在Vue实例中使用它。例如：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ fullName }}</p>
</div>

在上面的例子中，我们使用了定义好的计算属性fullName。

值得注意的是，在计算属性将追踪它所依赖的任何属性的变化。每当依赖的属性发生变化时，计算属性会重新计算并更新成最新的结果。

计算属性的缓存

计算属性是通过缓存计算结果来优化性能的。默认情况下，计算属性只有在它的相关依赖发生改变时才会重新求值。

new Vue({
  computed: {
    fullName: function () {
      console.log('计算fullName');
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在上面的例子中，每当firstName或lastName改变时，fullName会重新计算并更新视图。但是，如果多次访问fullName，且firstName和lastName未发生变化，Vue不会重新计算fullName的值，而是直接返回缓存好的值。这是因为计算属性是具有缓存性质的，只有相关依赖发生变化时才会重新计算。

计算属性与methods的对比

有时，我们可以使用methods来取代计算属性，达到相同的效果：

new Vue({
  methods: {
    fullName: function () {
      console.log('计算fullName');
      return this.firstName + ' ' + this.lastName;
    }
  }
})

在上面的例子中，我们使用了methods定义了一个名为fullName的方法，和计算属性的函数体一样，只不过通过调用方法来获得fullName的值。

计算属性与methods的最大区别在于，计算属性具有缓存性质，即只有在相关依赖变化时才会重新计算，而methods不具备缓存性质，无论何时都会重新计算。因此，如果计算属性依赖的属性比较多，或者计算量比较大，推荐使用计算属性来提高性能。

总结

• 计算属性是根据其他属性的值计算出一个新值的属性。
• 计算属性具有缓存性质，只有在相关依赖变化时才会重新计算。
• 计算属性适用于依赖较多或计算量比较大的情况。
• 尽量使用计算属性，减少不必要的计算。