Vue2源码分析（五）：computed & watch

前言

在之前的文章中，我们已经分析了Vue2 中响应式数据的实现原理，以及如何通过观察者模式来实现数据的更新。在这一篇中，我们将继续分析Vue2 中的两个重要特性：computed 和 watch。

computed

computed 属性是一个计算属性，它允许您在组件中定义一些计算值。这些计算值可以依赖于其他属性，并且当这些属性发生变化时，计算值也会自动更新。

computed 属性的创建过程如下：

1. 当组件初始化时，Vue 会解析模板中的所有计算属性。
2. 对于每个计算属性，Vue 会创建一个 Watcher 对象。这个 Watcher 对象会监视计算属性所依赖的属性。
3. 当计算属性所依赖的属性发生变化时，Watcher 对象就会触发计算属性的更新。
4. 计算属性的更新过程会重新计算计算属性的值。
5. 计算属性的更新值会更新组件的视图。

watch

watch 是一个观察者 API，它允许您在组件中监视某些属性或表达式的变化。当这些属性或表达式发生变化时，您可以执行一些操作，例如更新组件的状态、调用方法，甚至发出网络请求。

watch 的创建过程如下：

1. 当组件初始化时，Vue 会解析模板中的所有 watch 属性。
2. 对于每个 watch 属性，Vue 会创建一个 Watcher 对象。这个 Watcher 对象会监视 watch 属性所指定的属性或表达式。
3. 当 watch 属性所指定的属性或表达式发生变化时，Watcher 对象就会触发 watch 属性的更新。
4. watch 属性的更新过程会执行 watch 属性所指定的回调函数。

区别

computed 和 watch 都是用来响应数据变化的特性，但它们之间还是有一些区别的。

• computed 是一个计算属性，它允许您在组件中定义一些计算值。这些计算值可以依赖于其他属性，并且当这些属性发生变化时，计算值也会自动更新。
• watch 是一个观察者 API，它允许您在组件中监视某些属性或表达式的变化。当这些属性或表达式发生变化时，您可以执行一些操作，例如更新组件的状态、调用方法，甚至发出网络请求。

总结

computed 和 watch 都是非常有用的特性，它们可以帮助您在组件中实现更复杂的功能。如果您正在开发一个Vue 应用程序，那么您应该了解这两个特性的使用方法。