基本认识

watch和computed的区别：
1、computed计算属性，关注点在模版，主要是抽离和复用模版中复杂的数据逻辑。
特点：当函数内部的依赖发生变化的后，数据才会重新计算。
2、watch侦听器，关注点在数据（data或computed中的数据）更新，主要负责给数据增加监听，当数据更新的时候监听器函数就会执行。
特点：数据更新的时候，需要完成什么样的逻辑。

  1. export default {
  2.   data(){
  3.     return{
  4.       result: 0
  5.     }
  6.   },
  7.   watch: {
  8.     // 可以获取到数据更新的新值和旧值
  9.     result(newVal, oldVal) {
  10.       console.log(newVal, oldVal);
  11.     }
  12.   }
  13. };

简单实现

例如我们实现一个简单的watch侦听器，先看一下我们的结构目录：

  1. ├─ 03-watch
  2.   ├─ Vue.js
  3.   ├─ index.html
  4.   ├─ main.js
  5.   ├─ reactive.js
  6.   └─ watcher.js

首先我们先去main.js文件中写出我们大致的结构：

  1. import Vue from "./Vue.js";
  3. const vm = new Vue({
  4.   data() {
  5.     return {
  6.       result: 0
  7.     };
  8.   },
  9.   watch: {
  10.     // 监听 data 中的 result
  11.     result(newVal, oldVal) {
  12.       console.log("watch result:", newVal, oldVal);
  13.     }
  14.   }
  15. });
  17. console.log(vm);
  19. vm.result = 100;
  20. vm.result = 200;
  22. console.log(vm.result);

接下来我们专注Vue.js文件就可以了，我们采用ES6的类来书写：

  1. class Vue {
  2.   constructor(options) {
  3.     // 这里是 Vue 类的入口
  4.   }
  6.   init(vm, watch) {
  7.     // 这里主要处理一些初始化的数据
  8.   }
  10.   initData(vm) {
  11.     // 处理 data() 中的响应式数据
  12.   }
  14.   initWatcher(vm, watch) {
  15.     // 处理 watch 中的监听数据
  16.   }
  17. }
  19. export default Vue;

以上就是我们今天Vue文件的大概结构，下面我们先来处理data中的数据：

  1. import { reactive } from "./reactive.js";
  3. class Vue {
  4.   constructor(options) {
  5.     // 我们在实例 Vue 的时候，传递进来一个对象，所以我们可以进行解构
  6.     const { data, watch } = options;
  8.     // 因为 data 中的数据是可以直接被访问到的，就像这样 vm.result
  9.     // 所以我们需要把 data 中的数据挂在到 Vue 实例上面
  10.     this.$data = data();
  11.     this.init(this, watch);
  12.   }
  14.   init(vm, watch) {
  15.     // 调用初始化 data
  16.     this.initData(vm);
  17.   }
  19.   initData(vm) {
  20.     // 我们把处理 data 这部分的代码，抽离出去为一个 reactive.js 文件
  21.     // reactive 方法介绍 3 个参数：当前实例、当 get data 中数据的回调、当 set data 中数据的回调
  22.     reactive(vm, (key, value) => {}, (key, newVal, oldVal) => {});
  23.   }
  24. }
  26. export default Vue;

处理data中的数据：

  1. export function reactive(vm, __get__, __set__) {
  2.   const _data = vm.$data;
  4.   // 遍历 data 中的数据，也就是 { result: 0 }
  5.   for (const key in _data) {
  6.     // 添加拦截
  7.     Object.defineProperty(vm, key, {
  8.       get() {
  9.         // 当获取 vm.result 的时候就会执行回调，且返回数据
  10.         __get__(key, _data[key]);
  11.         return _data[key];
  12.       },
  13.       set(newVal) {
  14.         // 当给 vm.result 设置值的时候就会执行回调，且赋值
  15.         const oldVal = _data[key];
  17.         _data[key] = newVal;
  18.         __set__(key, newVal, oldVal);
  19.       }
  20.     });
  21.   }
  22. }

到这里我们已经处理好data的数据了，实例数据如下：
image.png

根据reactive.js的set方法，我们这样打算：既然到result改变的时候，我们可以拦截到，且执行了回调方法，那我们在回调了去执行watch不就可以了吗？

那么我们就继续来写watcher.js文件：

  1. class Watcher {
  2.   constructor() {
  3.     this.watchers = [];
  4.     /**
  5.      * watchers 的数据结构：
  6.      *     {
  7.      *      key: result
  8.      *      fn: result(newVal, oldVal)
  9.      *     }
  10.      *
  11.      * 通过 addWatcher(vm, watcher, key) 去往 watchers 里面添加数据
  12.      *  */
  13.   }
  15.   // 往 watchers 里面添加数据
  16.   addWatcher(vm, watcher, key) {
  17.     this._addWatchProp({
  18.       key,
  19.       fn: watcher[key].bind(vm)
  20.     });
  21.   }
  23.   invoke(key, newVal, oldVal) {
  24.     // 用 addWatcher 保存的值去遍历对比
  25.     this.watchers.map((item) => {
  26.       if (item.key === key) {
  27.         // 调用 result() 传入新值、旧值
  28.         item.fn(newVal, oldVal);
  29.       }
  30.     });
  31.   }
  33.   _addWatchProp(watchProp) {
  34.     this.watchers.push(watchProp);
  35.   }
  36. }
  38. export default Watcher;

接着我们在Vue.js文件中引入watcher.js：

  1. import { reactive } from "./reactive.js";
  2. import Watcher from "./watcher.js";
  4. class Vue {
  5.   constructor(options) {
  6.     // 我们在实例 Vue 的时候，传递进来一个对象，所以我们可以进行解构
  7.     const { data, watch } = options;
  9.     // 因为 data 中的数据是可以直接被访问到的，就像这样 vm.result
  10.     // 所以我们需要把 data 中的数据挂在到 Vue 实例上面
  11.     this.$data = data();
  12.     this.init(this, watch);
  13.   }
  15.   init(vm, watch) {
  16.     // 调用初始化 data
  17.     this.initData(vm);
  19.     // 初始化 watch，且传入实例对象和 watch 对象（也就是 { watch: { result:xxx }}）
  20.     // 然后我们就能得到一个 watcher 的实例，并把它保存到实例对象上面，方面后面直接调用执行
  21.     const watcherIns = this.initWatcher(vm, watch);
  22.     this.$watch = watcherIns.invoke.bind(watcherIns);
  23.   }
  25.   initData(vm) {
  26.     // 我们把处理 data 这部分的代码，抽离出去为一个 reactive.js 文件
  27.     // reactive 方法介绍 3 个参数：当前实例、当 get data 中数据的回调、当 set data 中数据的回调
  28.     reactive(vm, (key, value) => {}, (key, newVal, oldVal) => {
  29.       // 当设置 vm.result 的时候我们就去执行 watch 的 invoke 方法
  30.       this.$watch(key, newVal, oldVal);
  31.     });
  32.   }
  34.   initWatcher(vm, watch) {
  35.     // 枚举 watch 然后新增监听器
  36.     // 返回实例，实例有调用 watch 的方法，执行监听器
  37.     const watcherIns = new Watcher();
  39.     for (const key in watch) {
  40.       // 实例、watch 对象、result
  41.       watcherIns.addWatcher(vm, watch, key);
  42.     }
  44.     return watcherIns;
  45.   }
  46. }
  48. export default Vue;

watchers 的结果
这样就算完成了，当我们去改变vm.result的时候，watch中的result()方法就会被执行。
image.png

源码地址：
https://github.com/xiechen1201/JSPlusPlus/blob/main/%E8%85%BE%E8%AE%AF%E8%AF%BE%E5%A0%82/Vue%E6%9C%AC%E5%B0%8A03/03/main.js