【vueJs源码】阅读之vm.$watch函数

**Vue.js 源码阅读之 vm.$watch 函数**

在 Vue.js 中，`vm.$watch` 是一个非常重要的方法，它允许我们监控数据变化并执行特定的回调函数。这个功能对于构建复杂的应用程序至关重要。

###什么是 `vm.$watch` ?

`vm.$watch` 是一个用于监控 Vue 实例上的属性或表达式的方法。它接受两个参数：第一个是要监控的属性或表达式，第二个是回调函数。当监控的属性或表达式发生变化时，回调函数将被执行。

### `vm.$watch` 的基本使用下面是一个简单的例子：

javascriptconst vm = new Vue({
 el: '#app',
 data: {
 count:0 }
})

vm.$watch('count', (newCount) => {
 console.log(`Count changed to ${newCount}`)
})

在这个例子中，我们监控了 `count` 属性，当它发生变化时，回调函数将被执行。

### `vm.$watch` 的内部实现让我们深入了解一下 `vm.$watch` 的内部实现。下面是相关的代码：

javascriptexport function watch(vm, expOrFn, cb, options) {
 const watcher = new Watcher(vm, expOrFn, cb, options)
 return () => watcher.teardown()
}

在这个函数中，我们创建了一个新的 `Watcher` 实例，并返回一个回调函数，用于清除该实例。

### `Watcher` 类下面是 `Watcher` 类的定义：

javascriptclass Watcher {
 constructor(vm, expOrFn, cb, options) {
 this.vm = vm this.expOrFn = expOrFn this.cb = cb this.options = options this.active = true this.dirty = false this.deps = []
 this.newDeps = []
 this.depIds = new Set()
 this.newDepIds = new Set()

 if (isUndef(expOrFn)) {
 return }

 this.isFunction = typeof expOrFn === 'function'
 this.isSSR = isServer this.dep = new Dep()
 }

 // ...
}

在这个类中，我们定义了几个属性和方法：

* `vm`: Vue 实例。
* `expOrFn`: 要监控的属性或表达式。
* `cb`: 回调函数。
* `options`:选项对象。
* `active`: 是否激活该实例。
* `dirty`: 是否需要重新计算依赖。
* `deps`: 当前依赖列表。
* `newDeps`: 新增的依赖列表。
* `depIds`: 当前依赖 ID 集合。
* `newDepIds`: 新增的依赖 ID 集合。

### `Watcher` 实例的生命周期下面是 `Watcher` 实例的生命周期：

javascriptWatcher {
 vm: Vue,
 expOrFn: string | function,
 cb: function,
 options: object,
 active: boolean,
 dirty: boolean,
 deps: array,
 newDeps: array,
 depIds: Set,
 newDepIds: Set,
 dep: Dep}

在这个生命周期中，我们可以看到 `Watcher` 实例的各个阶段：

* **创建**: 当我们创建一个新的 `Watcher` 实例时，`active` 属性为 `true`。
* **激活**: 当我们激活该实例时，`active` 属性为 `true`。
* **重新计算依赖**: 当我们需要重新计算依赖时，`dirty` 属性为 `true`。
* **清除**: 当我们清除该实例时，`active` 属性为 `false`。

### 总结在本文中，我们深入了解了 Vue.js 中的 `vm.$watch` 方法及其内部实现。我们看到 `Watcher` 类是 `vm.$watch` 的核心组成部分，它负责监控数据变化并执行回调函数。通过分析 `Watcher` 实例的生命周期，我们可以更好地理解这个方法的工作原理。

希望本文对您有所帮助！