关于Vue源码vm.$watch()内部原理详解

1. 简介

vm.$watch() 是 Vue.js 内置的一个 API，用于监控 Vue 实例上的数据变化，并作出相应的响应式行为。在使用 Vue 进行开发时，经常会使用 $watch() 进行数据监听操作。

2. 原理

当我们使用 vm.$watch() 时，会创建一个监听器对象（Dep），用于监听指定属性的变化，并执行相应的回调函数。监听器对象会被添加到该属性对应的依赖列表中，当属性变化时，会通知所有依赖于这个属性的监听器对象，执行其回调函数。

在 Vue.js 的实现中，监听器对象是通过 Object.defineProperty() 来实现响应式的。当各个组件中的监听的数据改变时，监听器对象便会触发相应的回调函数。

3. 示例说明

示例1：

现在我们要监听 Vue 实例中的一个 msg 数据的变化：

var vm = new Vue({
  data: {
    msg: 'hello world'
  }
});

vm.$watch('msg', function (newVal, oldVal) {
  console.log('msg changed from ' + oldVal + ' to ' + newVal);
});

以上代码中，我们通过 $watch() 监听了 msg 数据的变化，并在变化时执行回调函数。其内部的实现原理是：为 msg 属性创建一个监听器对象（Dep），并将其添加到消息订阅器中，收集所有依赖于 msg 属性的组件，并在属性变化时通知订阅器，执行回调函数。

示例2：

在 Vue.js 中，我们同样可以使用 $watch() 监听一个计算属性的变化：

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

vm.$watch('fullName', function (newVal, oldVal) {
  console.log('fullName changed from ' + oldVal + ' to ' + newVal);
});

以上代码中，我们监听了 fullName 计算属性的变化，并在变化时执行回调函数。其内部实现原理与示例1类似，为 fullName 属性创建一个监听器对象并将其添加到所有依赖的组件中，在属性变化时通知所有订阅器并执行回调函数。