巧用Vue2 Computed和Watch，让你的代码更优雅
2023-04-11 22:42:52
了解 Vue 中 computed 和 watch：响应式编程的强大工具
在 Vue 2 中，数据响应性是实现动态和交互式 Web 应用程序的关键。而 computed 和 watch 则是两个强大的工具，可帮助开发者响应数据变化并执行特定操作。
computed：计算属性的幕后机制
computed 属性允许开发者定义依赖于其他属性的计算属性。Vue 会为每个 computed 属性创建一个 getter 函数，该函数在第一次访问属性时执行并缓存结果。当依赖发生变化时，getter 函数会重新执行，更新缓存结果。这种机制确保 computed 属性始终是最新的，并且只在必要时执行。
watch：侦听属性变化的原理
侦听属性 watch 允许开发者在数据发生变化时执行特定的动作。当定义一个 watch 时，Vue 会创建一个 Watcher 实例来监视指定的数据。这个 Watcher 会在初始化时获取初始值并将其添加到数据的依赖列表中。当数据变化时，Vue 会通知 Watcher 实例，然后 Watcher 实例会执行相应的操作。
computed 和 watch 的差异和适用场景
差异：
- computed 用于定义只依赖于其他属性的属性，而 watch 用于在数据变化时执行操作。
- computed 的 getter 函数只在必要时执行，而 watch 的回调函数每次数据变化时都会执行。
- computed 的 getter 函数可以返回任何值，而 watch 的回调函数只能返回一个函数。
适用场景：
- computed： 计算只依赖于其他属性的属性，如总价、平均值。
- watch： 在数据变化时执行操作，如验证表单、更新 UI。
实战演练：使用 computed 和 watch 优化代码
使用 computed 优化代码：
// 计算总价
const totalPrice = computed(() => {
return cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
});
使用 watch 优化代码：
// 在用户输入时验证表单
watch: {
username(val) {
if (val.length < 3) {
this.usernameError = '用户名必须至少包含3个字符';
} else {
this.usernameError = '';
}
}
}
掌握 computed 和 watch，提升 Vue 代码质量
computed 和 watch 是 Vue 2 中响应式编程的利器。理解它们的原理、差异和适用场景，开发者可以编写更优雅、更高效的代码。通过结合实际案例，开发者可以熟练运用这些工具，优化代码并提升开发体验。
常见问题解答
-
computed 和 watch 有什么关系？
computed 和 watch 都用于响应数据变化，但 computed 专注于计算属性，而 watch 用于执行动作。 -
什么时候应该使用 computed？
当需要计算只依赖于其他属性的属性时，如计算总价、平均值。 -
什么时候应该使用 watch？
当需要在数据变化时执行操作时，如验证表单、更新 UI。 -
computed 比 watch 更高效吗？
是的，computed 的 getter 函数只在必要时执行，而 watch 的回调函数每次数据变化时都会执行。 -
如何处理 computed 和 watch 的依赖关系？
Vue 会自动管理依赖关系，但开发者需要避免创建循环依赖，这可能会导致无限循环。
