Vue的数据响应式：computed watcher的精妙之处

2023-12-26 03:58:09

computed watcher的诞生与使命

在Vue.js中，数据响应式是核心特性之一。通过响应式系统，Vue能够自动追踪数据属性的变化，并联动更新相关的视图。为了实现这种联动更新，Vue内部会为每个数据属性创建一个watcher（监视器），以便实时监视数据属性的变化。

computed watcher是一种特殊的watcher，它负责监视计算属性的变化。计算属性是Vue.js中一种特殊的属性，它是基于其他数据属性计算出来的，具有缓存性。当计算属性依赖的数据属性发生改变时，computed watcher就会被触发，重新计算计算属性的值，并更新依赖它的模板。

computed watcher的内部机制

computed watcher是如何实现的？它又是如何与数据属性变化联动的呢？

在Vue.js的源码中，computed watcher的实现主要依赖于两个类：Watcher和Dep。Watcher类负责监视数据属性的变化，而Dep类则负责维护数据属性与watcher之间的依赖关系。

当一个computed属性被创建时，Vue会为它创建一个Watcher实例，并将其添加到依赖它的数据属性的Dep实例中。当数据属性发生改变时，Dep实例会通知所有的Watcher实例，触发它们执行回调函数。在computed watcher的回调函数中，Vue会重新计算计算属性的值，并更新依赖它的模板。

computed watcher的应用场景

computed watcher在Vue.js中有着广泛的应用场景，下面列举一些常见的场景：

计算属性： 这是computed watcher最常见的应用场景。当需要根据其他数据属性计算出一个新的属性时，可以使用computed属性。例如，可以定义一个计算属性来计算购物车的总价，该属性依赖于购物车中商品的价格和数量。
格式化数据： computed watcher可以用来格式化数据，以便在模板中以更友好的方式显示。例如，可以定义一个computed属性来将日期格式化为更易读的字符串。
过滤数据： computed watcher可以用来过滤数据，只显示满足一定条件的数据。例如，可以定义一个computed属性来过滤出购物车中价格高于某个阈值的产品。
数据验证： computed watcher可以用来验证数据，确保数据符合一定的规则。例如，可以定义一个computed属性来验证表单输入的有效性。