深入解析 Vue.js 中的 Computed 和 Watch：揭秘背后的源码
2023-10-23 10:01:45
深入剖析 Vue.js 中 Computed 和 Watch：响应式编程的利器
在 Vue.js 中，响应式编程是实现动态和交互式界面的基石。Computed 和 Watch 是两种关键响应机制，它们以不同的方式帮助我们响应数据的变化。本文将深入分析 Computed 和 Watch 的工作原理，揭开它们背后的机制，让您全面掌握这些响应式工具。
Computed：惰性计算的利器
什么是 Computed？
Computed 是一个计算属性，它依赖于其他响应式属性。当这些依赖项发生变化时，Computed 会自动重新计算并返回最新结果。
创建方式
Computed 可以通过以下三种方式创建：
// 对象语法
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
// 工厂函数
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
}
// 装饰器
@computed
get fullName() {
return this.firstName + ' ' + this.lastName;
}
惰性执行
Computed 的一个关键特性是惰性执行。这意味着它只会在被访问时才会计算其值。这大大提高了性能，避免了不必要的计算浪费。
缓存
为了进一步提升性能，Vue.js 对 Computed 的计算结果进行了缓存。当 Computed 的依赖项没有变化时，Vue.js 会直接返回缓存的结果，避免重复计算。
依赖收集
Computed 依赖于其他响应式属性，因此它需要收集这些依赖项，以便在它们发生变化时重新计算 Computed。依赖收集通过一个名为 dep 的依赖收集器来实现。当 Computed 创建时，它会将 dep 添加到依赖项的订阅者列表中。当依赖项发生变化时，dep 会通知订阅者，触发 Computed 的重新计算。
Watch：变化的敏锐观察者
什么是 Watch？
Watch 是一个侦听器，它监视特定数据或表达式的变化。当被监视的数据发生变化时，Watch 会触发指定的回调函数。
创建方式
Watch 的创建方式相对简单：
watch: {
count(newValue, oldValue) {
console.log(`Count changed from ${oldValue} to ${newValue}`);
}
}
回调函数
Watch 的回调函数可以接收两个参数：新值和旧值。通过比较这两个值，我们可以判断数据发生了哪些变化，并采取相应的处理措施。Watch 对于监视用户输入、表单验证和执行副作用等场景非常有用。
总结
Computed 和 Watch 是 Vue.js 中响应式编程的强大工具。它们提供不同的方式来响应数据的变化，让您轻松创建动态且交互式的应用程序。
常见问题解答
- Computed 和 Watch 的主要区别是什么？
- Computed 返回计算结果，而 Watch 触发回调函数。
- Computed 为什么使用惰性执行？
- 惰性执行提高了性能，避免了不必要的计算。
- Vue.js 如何缓存 Computed 的计算结果？
- 通过
value属性存储最新计算结果。
- 通过
- Watch 的回调函数可以接收哪些参数？
- 新值和旧值。
- Computed 和 Watch 在 Vue.js 中有什么实际用途？
- Computed 用于计算派生数据，而 Watch 用于监视变化并执行副作用。
