vue双向绑定问题

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了### 问题描述


慕森王
浏览 607回答 2
2回答

守着星空守着你

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

饮歌长啸

可以再网上找一些简单的实现: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技术内幕
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Vue.js