计算与观察：Vue 中 Computed 和 Watch 的差别
2023-12-03 13:06:29
Computed 与 Watch：Vue 中响应式工具的指南
在构建交互式 Vue 应用程序时，响应式数据是至关重要的。Vue 提供了两个强大的工具：Computed 和 Watch，它们允许开发者根据数据变化动态更新视图。虽然它们都实现了响应式，但在实现方式和用途上却截然不同。了解它们之间的差异对于选择最适合你的需求的工具至关重要。
Computed：派生的值
Computed 属性是 Vue 实例上派生的值，由函数计算得出。这些属性不需要任何参数，可以直接在模板中使用。Computed 函数仅在依赖的数据发生变化时才重新计算其值。
想象一下你正在构建一个购物应用程序。你想显示一个名为 totalPrice 的属性，它是购物车中所有商品价格的总和。你可以创建一个 computed 属性来计算这个值：
computed: {
totalPrice() {
return this.cart.items.reduce((total, item) => total + item.price, 0);
}
}
Watch：观察者
Watch 是一种观察者，监视一个或多个数据源的变化，并在这些数据源发生变化时执行回调函数。Watch 可以传递一个函数或对象作为回调。
回到我们的购物应用程序示例，你想在每次用户添加到购物车时都发出一个警报。你可以使用 watch 监视 cart.items 数组的变化：
watch: {
'cart.items': function (newVal, oldVal) {
if (newVal.length > oldVal.length) {
alert('商品已添加到购物车！');
}
}
}
主要区别
1. 触发方式： Computed 属性仅在依赖的数据发生变化时才重新计算，而 Watch 则在监视的数据发生变化时触发回调函数。
2. 值访问： Computed 属性可以通过直接使用属性名来访问，而 Watch 的返回值只能通过回调函数获取。
3. 性能优化： Computed 属性使用缓存机制，这意味着如果依赖的数据没有变化，Computed 的值将不会重新计算。Watch 没有此优化，每次数据变化都会触发回调。
用例比较
何时使用 Computed：
- 计算派生的值，这些值不需要任何参数。
- 计算耗时的值，需要缓存以优化性能。
- 在模板中直接访问计算后的值。
何时使用 Watch：
- 监视数据的变化并执行自定义操作。
- 执行副作用，例如在数据变化时发送网络请求。
- 当需要访问数据的新值和旧值时。
结论
Computed 和 Watch 是 Vue 中两个强大的响应式工具，它们允许开发者创建对数据变化高度响应的应用程序。了解它们的差异对于选择最佳工具至关重要。Computed 用于计算派生的值并优化性能，而 Watch 用于监视数据的变化并执行自定义操作。通过明智地使用这些工具，开发者可以构建交互式且高效的 Vue 应用程序。
常见问题解答
-
Computed 和 Watch 之间哪个更好？
没有“更好”之说，每个工具都适合不同的用途。选择最适合你需求的工具。 -
我可以在 computed 中使用异步操作吗？
是的，你可以使用 Vue 的asyncComputed插件来实现。 -
我可以在 watch 中更改被监视的数据吗？
是的，但谨慎使用，因为这可能会导致无限循环。 -
为什么我的 computed 属性没有被更新？
确保你的 computed 属性依赖的数据发生了变化，并且 computed 函数不是定义在methods对象中的。 -
为什么我的 watch 回调函数每次数据变化都会被调用，即使数据没有变化？
确保你在 watch 回调函数中使用了deep: true选项。
