Vue watch原理源码层深入讲解

概述

在Vue中，watch表示当数据变化时需要执行的操作。Vue通过watch实现了响应式更新数据的机制，并提供了watch方法供开发者使用。

watch方法的使用非常灵活，可以监视对象、数组、深层属性等复杂类型的数据。本篇文章主要从源码层面深入解析Vue watch的实现原理，以及watch的应用示例。

Vue watch的原理

在Vue代码中，watch的实现依赖于一个Watcher类和纯函数createWatcher。

Watcher类是Vue watch机制的核心，它实现了响应式的检测与通知。当监听的数据改变时，会触发Watcher实例的update方法进行更新，也就是通知Dep（Dependency）依赖的数据发生变化了。

Dep类是Watcher依赖的容器，保存了Watcher所依赖的数据源。当Watcher需要更新时，Dep会把Watcher放入一个队列中，并在后续遍历时遍历这个队列依次执行Watcher的更新方法。这就保证了所有Watcher的顺序性，从而避免了因数据更新导致的依赖关系错误。

createWatcher函数是负责watch的定义，它接收三个参数：vm（Vue实例）、expOrFn（需要监控的函数表达式或深度侦听的属性路径）、cb（当监控的表达式发生变化时的回调函数），返回一个Watcher实例。

Watcher实例所依赖的数据源是expOrFn返回的返回值。当expOrFn返回的返回值发生变化，Watcher实例就会被触发，从而执行回调函数cb。

使用示例

以下是两个watch的示例：

1. 监听对象

//监听一个对象obj
watch: {
    obj: {
        handler: function(newVal, oldVal) {
            console.log('obj changed!', 'new:', newVal, 'old:', oldVal)
        },
        deep: true
    }
}

1. 监听组件属性

export default {
  data () {
    return {
      firstName: 'Jing',
      lastName: 'Wang'
    }
  },
  watch: {
    firstName: function (newVal, oldVal) {
      console.log(newVal + ' ' + this.lastName)
    },
    lastName: function (newVal, oldVal) {
      console.log(this.firstName + ' ' + newVal)
    }
  }
}

以上两个示例分别演示了watch对对象和组件属性的监听。通过对watch原理的深入分析，我们可以更好地理解watch的实现原理，从而更好地使用Vue提供的监控机制。