Vue-计算属性computed跟方法method、侦听属性watch对比

• Vue官方文档写得很详细,有任何Vue知识都建议先读读文档

computed

计算属性

• 计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
• computed用来监控自己定义的变量，该变量不用在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

计算属性缓存 vs 方法

计算属性缓存 vs 方法

• 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
• 也就是计算属性只要计算过一次,平时它的响应式依赖不变,那么不管访问多少次计算属性,都可以直接拿到计算结果,不需要再一次执行函数,而方法每一次访问都会执行一次函数
• 我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

计算属性-vs-侦听属性

• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，计算属性直接监听自己定义的变量,该变量不用在data里声明

计算属性的 setter

计算属性的 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

---

写过一次,相比于看一次,印象会深刻很多,当然花的时间也多了

谢谢你阅读到了最后
欢迎点赞、评论、交流、我们一起成长

推荐阅读

Vue的计算属性computed的缓存原理详解