vm.$watch('a.b.c',function (newVal,oldVal) {    //....})

export default class Watcher {    //vm:监听对象；expOrFn监听的表达式或函数,如a.m；cb:回调函数；    constructor(vm, expOrFn, cb) {        this.vm = vm;        //执行this.getter()，就可以读取a.m的内容        this.getter = parsePath(expOrFn);        this.cb = cb;        this.value = this.get();    }    get() {        //进入依赖收集阶段        window.target = this;        // call(上下文，参数1,参数2,..),这里值将this.getter方法放到this.vm里执行，后面的this.vm是传入this.getter方法的参数
        //这里执行this.getter()函数的时候获取了响应式数据的值，触发了响应式数据的getter，即defineReactive中defineProperty的get        //则defineProperty的get就可以通过window.target收集这个依赖        let value = this.getter.call(this.vm, this.vm);        window.target = undefined;        return value;    }    update() {        const oldValue = this.value;        this.value = this.get();        this.cb.call(this.vm, this.value, oldValue);    }}
function parsePath(str) {    const segments = str.split(".");    return (obj) => {        for (let i = 0; i < segments.length; i++) {            if (!obj) return;            obj = obj[segments[i]];        }        return obj;    };}

import Watcher from "./Watcher.js";let obj = {    a: {        m: 99,    },};observe(obj);new Watcher(obj, "a.m", (newVal, oldVal) => {    console.log("新的值--》", newVal);    console.log("老的值--》", oldVal);});

let fn = parsePath("a.m");let value = fn({    a: {        m: 6,    },});console.log(value); //打印结果6

    get() {        //进入依赖收集阶段        window.target = this;        // call(上下文，参数1,参数2,..),这里值将this.getter方法放到this.vm里执行，后面的this.vm是传入this.getter方法的参数
        //这里执行this.getter()函数的时候获取了响应式数据的值，触发了响应式数据的getter，即defineReactive中defineProperty的get        //则defineProperty的get就可以通过window.target收集这个依赖        let value = this.getter.call(this.vm, this.vm);        window.target = undefined;        return value;    }

export default class Dep {    constructor() {            //存储自己的订阅者，即Watcher实例            this.subs = [];        }        //添加订阅    addSub(sub) {            this.subs.push(sub);        }        //添加依赖    depend() {            //window.target是我们指定的全局唯一的位置，当有依赖产生时Watcher会将依赖绑定到该位置            if (window.target) {                this.addSub(window.target);            }        }        //通知更新    notify() {        //浅克隆:防止循环引用        const subs = this.subs.slice();        for (let i = 0, l = subs.length; i < l; i++) {            subs[i].update();        }    }}

//...import Dep from "./Dep.js"; //增加export default class Observer {    constructor(value) {            //每个Observer的实例上都有一个Dep            this.dep = new Dep(); //增加            //.......        }  //.......}

import observe from "./observe.js";import Dep from "./Dep.js"; //新增export default function defineReactive(data, key, val) {    const dep = new Dep();  //新增    if (arguments.length == 2) {        val = data[key];    }    //子元素要进行observe，至此形成了递归调用。（多个函数循环调用）    let childOb = observe(val);    Object.defineProperty(data, key, {        //可枚举        enumerable: true,        //可以被配置，比如delete        configurable: true,        // 读取key时触发 getter        get: function() {            console.log(`你试图访问${data}的${key}属性，它的值为：${val}`);            //如果现在处于依赖收集阶段  //新增            dep.depend();  //新增            if (childOb) {  //新增                childOb.dep.depend();  //新增            }  //新增            return val;        },        //更改key时触发 setter        set: function(newVal) {            console.log(`你试图改变${data}的${key}属性，它的新值为：${newVal}`);            if (val === newVal) {                return;            }            val = newVal;            childOb = observe(newVal);
            dep.notify();  //新增        },    });}

methodName.forEach(function(method) {    const original = arrayProto[method];    def(        arrayMethods,        method,        function(...args) {      //...      //触发依赖            ob.dep.notify(); // 新增            console.log("调用了我们改写的7方法");            return result;        },        false    );});