Vue2 侦听属性原理大解析

2024-01-23 04:48:07

在Vue2的源码剖析系列文章中，我们已经深入探讨了Vue2的响应式原理，包括数据劫持、依赖收集和派发更新等机制。在这一章中，我们将重点关注侦听属性（watch）的原理。

侦听属性概述

侦听属性允许我们观察Vue实例的数据变化，并在数据变化时执行相应的回调函数。侦听属性的语法如下：

watch: {
  'propertyName': {
    handler: function (newVal, oldVal) {
      // newVal是新值，oldVal是旧值
    },
    options: {
      // 选项，例如deep、immediate等
    }
  }
}

侦听属性与渲染watcher

侦听属性与渲染watcher都是Vue2中用来响应数据变化的机制，但两者之间存在一些关键的区别：

侦听属性是用户定义的，而渲染watcher是系统自动创建的。
侦听属性的第二个参数是一个回调函数，而渲染watcher的第二个参数是一个表达式。
侦听属性可以设置options选项，而渲染watcher没有options选项。
侦听属性会在数据变化后立即执行回调函数，而渲染watcher会在下次DOM更新时执行回调函数。

侦听属性的原理

侦听属性的原理本质上就是创建用户watcher。用户watcher与渲染watcher的主要区别在于第二个参数exprOrFn以及options。对于侦听属性，exprOrFn是一个函数，而对于渲染watcher，exprOrFn是一个表达式。options是一个可选参数，用于配置侦听属性的行为。

用户watcher的创建过程如下：

在this.get()中收集依赖。
在run中执行回调函数。

当数据变化时，this.get()会再次执行，收集新的依赖关系。如果新的依赖关系与旧的依赖关系不同，则会触发run方法，执行回调函数。

侦听属性的选项

侦听属性可以设置options选项，用于配置侦听属性的行为。options选项包括：

deep： 如果为true，则侦听属性将深度观察对象的变化。这意味着即使对象中的嵌套属性发生变化，侦听属性也会触发回调函数。
immediate： 如果为true，则侦听属性将在组件创建时立即执行回调函数。
lazy： 如果为true，则侦听属性将在首次渲染后才执行回调函数。

侦听属性的应用场景

侦听属性可以用于各种场景，例如：

监控表单输入的变化。
响应路由的变化。
监听数据的变化并更新UI。
在数据发生变化时触发特定的操作。

总结

侦听属性是Vue2中用于响应数据变化的机制之一。侦听属性与渲染watcher的主要区别在于第二个参数exprOrFn以及options。侦听属性可以设置options选项，用于配置侦听属性的行为。侦听属性可以用于各种场景，例如监控表单输入的变化、响应路由的变化、监听数据的变化并更新UI以及在数据发生变化时触发特定的操作等。