您现在的位置是:首页 >其他 >Vue 中的 watch 和 computed 的区别是什么?网站首页其他

Vue 中的 watch 和 computed 的区别是什么?

一颗松鼠 2024-06-17 10:47:03
简介Vue 中的 watch 和 computed 的区别是什么?

在 Vue.js 中,watchcomputed 都是用来监听数据变化的方式,但它们的使用方式和实现机制有所不同,下面是它们的区别:

✨ 实现机制

watch 监听的是一个具体的数据,当数据变化之后会执行相应的回调函数;computed 属性就像一个响应式的计算属性,是基于所依赖的数据进行缓存处理的。当依赖的数据变化时,computed 属性会自动更新缓存,而数据发生变化时不会立即执行相应的操作,而是等待下一次任务队列的更新时机。

✨ 适用场景

  • watch 更适合有副作用的数据监听,例如一些需要后台请求的数据;
  • computed 更适合基于已有数据(data 和 props)计算得出的属性,并且需要缓存的场景。

✨ 功能

  • watch 可监听多个数据,可以在数据变化时做出相应的处理;
  • computed 只支持计算属性的缓存,当依赖的数据变化时会自动更新缓存,而且可以设置 gettersetter

✨ 性能

  • watch 的性能较弱,因为它监测的是具体某一个数据或多个数据的变化,如果监听的数据过多,那么 watch 会对整个应用的性能造成不良影响;
  • computed 的性能较好,因为它本质上是一个缓存,只有当数据发生变化时才会更新缓存,不会像 watch 一样无脑地遍历监听数据。

✨ 监听数据的不同

  • watch 监听的是一个具体的数据,可以是一个 data 中的属性或者是一个组件外部传递进来的 prop。当该数据发生变化时,会执行相应的回调函数。
  • computed 是一个计算属性,它是一个基于已有数据(data 和 props)计算得出的属性,在模板中使用时,就像一个响应式属性一样。当计算依赖的数据发生变化时,计算属性会自动更新,并且计算属性具有缓存机制,在计算属性依赖的数据未发生变化时,直接返回缓存结果。

✨执行时机的不同

  • watch 是当监听的数据发生变化时就会立即执行回调函数,用于监听有异步操作的数据。
  • computed 是每当依赖的数据发生变化时,才会重新计算,用于在模板中处理数据的逻辑

✨实现方式的不同

  • watch 主要是通过 $watchwatch 对象来实现,$watch 可以监听单个数据的变化,watch 对象可以监听多个数据的变化。
  • computed 是通过 computed 属性来实现的,它接收一个对象作为参数,对象中的 key 对应计算属性的名称,value 对应计算属性的逻辑函数。

总之,watch 更加灵活,涉及到的数据范围也更广泛,但相对而言性能上略逊一筹;computed 更加简洁,并且能够节省性能,但是只适合对已有的数据进行计算得出结果返回,一般情况下computed 是用来处理复杂的逻辑运算,在模板中调用方便;watch 则是用来监听一些数据变化,通常是需要执行异步操作时使用。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。