vue双向绑定问题

Question

1.初始化 vue时，会通过数据劫持 给data中的每个属性设置get和set方法2.每个get中通过dep.depend()将当前的watch添加到subs搜集器中3.设置新值时，触发set中的dep.notify()去通知 watch.update更新 视图现在疑问1.data中的每个属性触发set，怎么知道当前属性跟哪个 dep对应绑定的呢？我看网上说是通过闭包，这样的话，data中变量过多，会不会产生性能问题2.初始化vue实例时，Dep.taget的当前watch，是什么时候入栈的，我看watch里的get方法顶部pushTarget入栈,后方法结束前又popTarget了### 问题描述

Answer 1

每个属性都会对应一个dep，在触发get函数时入栈

Answer 2

可以再网上找一些简单的实现：

function observer(obj) {    if (!obj || typeof obj !== 'object') {        return ;
    }    Object.keys(obj).forEach((key) => {
        reactive(obj, key, obj[key]);
    });
}function reactive(obj, key, value) {
    observer(value);    const dep = new Dep();    Object.defineProperty(obj, key, {        configurable: false,        enumerable: true,
        get() {
            Dep.target && dep.addSub(Dep.target);            return value;
        },
        set(newValue) {
            value = newValue;
            dep.notify();
        }
    })
}class Dep{    constructor() {        this.subs = [];
    }
    addSub(sub) {        this.subs.push(sub);
    }
    notify() {        this.subs.forEach(sub => {
            sub.update();
        });
    }
}class Watcher{    constructor(vm, exp, cb){        this.vm = vm;        this.exp = exp;        this.cb = cb;        this.value = this.get();
    }
    get() {
        Dep.target = this;        const value = this.vm[this.exp];
        Dep.target = null;        return value;
    }
    update() {        const oldValue = this.value;        const value = this.get();        if (oldValue !== value){            this.value = value;            this.cb.call(this.vm, value, oldValue);
        }
    }
}

推荐个源码解读-Vue技术内幕