计算属性与侦听器总结

计算属性与侦听器总结

• 计算属性简介（缘由）：模板里不建议进行复杂的逻辑操作，为了代码的整洁，放到computed计算属性（侦听器等效）。

• 计算属性是为了防止表达式或逻辑复杂时使用计算属性。

• 所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终通过return返回计算结果

   三部曲：①调用---②computed选项---③方法返回值
  

• 计算属性的两个实用小技巧/特点：

   ①计算属性可以依赖其他计算属性
   ②计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他实例数据
  

• 计算属性 vs 方法：

   除了计算属性可以通过在表达式中调用方法来达到效果
   使用methods来替代computed，效果上两个一样，但computed是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值，而使用methods在重新渲染的时候函数总会重新执行。
   可以说使用computed性能会更好，但如果不希望缓存可以使用methods属性。
  

小结：

相比之下，每当触发重新渲染时，调用方法总会再次执行函数。

• computed vs methods：

  为什么需要缓存？
  假设有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量计算，我们可能有其他的计算属性依赖于A，如果没有缓存，我们将不可避免多次执行A，如果不希望缓存，可以用方法来替代。

  除了计算属性，Vue还提供了侦听器/属性这种通用的方法来观察和响应Vue实例上的数据变动。

本章小结：
使用计算属性还是methods取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性，除非不希望得到缓存。
因为侦听器watch相对繁琐，大多数情况推荐使用计算属性computed处理。

用哪种还是取决于你阿~