计算属性和侦听器

214 阅读2分钟

1.计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的,在模板中放入太多的逻辑会让模板过重且难以维护。

  • 因此对于任何包含响应式数据的复杂逻辑,都应该使用计算属性
  • 声明计算属性
  • 像普通属性一样将数据绑定到模板中的计算属性
  • 声明的方式创建依赖关系:计算属性的getter函数没有副作用,更易于测试和理解

1.1计算属性缓存vs方法

在表达式中调用方法可以达到同样的效果,我们可以将同一个函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。然而,不同的是,计算属性是基于它们的响应依赖关系缓存的。

  • 计算属性只在相关响应式依赖发生改变时它们才会重新求值,这意味着只要依赖没有发生改变,计算属性会立即返回之前的计算结果,而不必再次执行函数
  • 相比之下,每当触发重新渲染时,调用methods将总会再次执行函数
  • 我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性list,它需要遍历一个巨大的数组并作大量的运算,然后我们可能有其他的计算属性依赖于list,如果没有缓存,我们将不可避免的多次执行list的getter!
  • 如果不希望有缓存,请用methods来替代

1.2计算属性的setter

计算属性默认只有getter,不过在需要时也可以提供一个setter。

2.侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,watch选项时最有用的。

  • 使用watch选项允许我们执行异步操作(访问一个API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态,这些都是计算属性无法做到的
  • 除了watch选项之外,还可以使用命令式的vm.$watch API

3.计算属性vs侦听器

Vue提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性。当有一些数据需要随着其他数据变动而变动时,很容易滥用watch,然而通常更好的做法是使用计算属性而不是命令式的watch回调。