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

这篇具有很好参考价值的文章主要介绍了Vue 中的 watch 和 computed 的区别是什么？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

✨ 实现机制

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

✨ 适用场景

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

✨ 功能

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

✨ 性能

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

✨ 监听数据的不同

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

✨执行时机的不同

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

✨实现方式的不同

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

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

到了这里，关于Vue 中的 watch 和 computed 的区别是什么？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！