Vue源码深入解析：$watch()的内部工作机制与示例

Vue源码中的`vm.$watch()`函数是一个核心组件，它允许开发者监视Vue实例中的数据属性变化，并在指定条件触发回调函数。深入理解这个函数的内部原理有助于优化性能和编写更高效的代码。本文将从以下几个方面解析`vm.$watch()`的内部实现： 1. **基本用法**： 在给定的示例中，`$watch`函数用于监听`data`属性中的`a.b.c`属性变化。`function`表达式返回要监视的路径，`this.handle`作为回调函数处理新旧值。`deep`选项设置为`true`表示进行深度监听，即使嵌套的对象或数组变化也会触发回调；`immediate`设为`true`则会在初次数据绑定时立即执行回调。 2. **依赖管理**： 当数据被`Observe`（即Vue的观测系统）化后，数据对象会添加一个`__ob__`属性，它包含一个`Dep`（依赖）实例和一个`subs`（订阅者）数组，用来跟踪依赖关系。`Watcher`实例会存储在`subs`中，负责在属性改变时通知。 3. **`isPlainObject`检查**： `isPlainObject`函数用于检测是否为普通JavaScript对象，这在决定如何创建和处理Watcher实例时至关重要。如果传入的`expOrFn`不是对象，`vm.$watch`可能会以不同的方式处理。 4. **内部实现**： `$watch`方法本质上创建了一个`Watcher`对象，其构造过程涉及以下步骤： - 接收三个参数：`expOrFn`（表达式或函数）、`cb`（回调函数或包含`handle`属性的对象）以及`options`（配置对象）。 - 根据参数类型，可能创建一个简单的`Watcher`实例，仅包含一个回调，或者根据对象配置创建一个包含深度和立即执行选项的复杂实例。 - 如果`deep`选项为`true`，`Watcher`会递归地追踪并监听深层属性的变化。 - 如果`immediate`为`true`，则在创建时就执行回调，而不是等到下次数据更新时。 5. **触发回调**： 当被监视的属性发生变化时，Vue会遍历所有活跃的`Watcher`实例，找到与该属性相关的实例，然后调用其`update`方法，执行回调函数并更新视图。 总结，`vm.$watch()`函数是Vue的核心功能之一，通过深入理解它的内部逻辑，开发者可以更好地控制数据变化的响应和性能优化。熟练掌握`Watcher`、`Dep`和`Observe`的工作原理，可以帮助你编写更高效、可维护的Vue应用。