vue中,watch与computed的区别。

284 阅读2分钟

我正在参加「掘金·启航计划」

在Vue中,watch和computed都是常用的属性。
watch是当一个特定的响应式数据发生变化时触发异步或开销较大的操作的回调函数; computed则是使用已有的响应式数据计算并返回新的派生值。

  1. 计算方式不同

computed函数会根据数据源自动进行计算并返回结果,因此它是一个计算的过程,不能进行修改。 watch是监控某个参数的变化,并找出变化后的过程来执行相应操作。

  1. 可以读取但不能修改computed属性

由于计算属性是根据已有的响应式数据计算结果得到的,所以计算属性只能进行读取,而不能被修改。这主要是因为修改计算属性所依赖的响应式数据本身会触发重新计算并更新计算属性,如果直接修改计算属性会导致计算结果不再准确。

  1. watch可以完成异步操作

由于watch是通过手动监听数据变化来进行操作的,所以它可以进行一些比较耗费时间的异步操作,如发送网络请求,调用API等。这通常比computed迭代计算更加适合处理复杂的计算逻辑以及需要I/O操作的场景。

  1. Computed属性懒计算

watcher的回调是立即执行的 , 而 computed 的特性是懒计算的,只有在用户使用时才会真正计算值。当然好处是计算结果缓存可以提高效率。一旦 computed 的依赖数据发生改变,则会重新计算 计算属性并更新DOM。

  1. 监听不同

Computed选择响应式依赖项最少的Listener进行监控reactive Data,Watch则可以创建任何类型的影响器,该影响器用于对Watch或者递归深度进行对象查看返回传入项是否更改。

computed更适用于表示依赖其他已有响应式数据计算出的新值,而watch则适用于观察某个特定值的变化,并根据这个值去完成其他一些开销较大或异步的操作。