mini-vue实现之响应式实现

mini-vue代码已放到github上。

响应式原理

Vue通过Observer类对data里的数据做数据劫持，通过compiler解析指令。然后通过data中的getter方法收集依赖，setter方法进行派发更新，收集以来的时候将所有的观察者watcher放入Dep发布者的subs数组中，当通过set改变数据的时候，调用dep的notify方法，遍历subs数组，执行每一个watcher的update方法。

实现Dep发布者类

Dep发布者类功能

• 收集依赖，添加观察者(watcher)
• 有更新时通知所有观察者

Dep类实现

class Dep {
    constructor() {
        this.subs = []
    }
    
    addSub(sub) {
        if(sub && sub.update) {
            this.subs.push(sub)
        }
    }
    
    notify() {
        this.subs.forEach(sub => {
            sub.update()
        })
    }
}

从vue的原理可以得知，在get的时候需要收集依赖，在set的时候做更新。我们在Observer类中为data中的数据添加get以及set方法。所以在Observer中修改代码

defineReactive(obj, key, value) {
    let that = this;
    // 负责收集依赖并发送通知
    let dep = new Dep();
    // 如果value是对象，把value内部属性转化成响应式数据
    this.walk(value);
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            Dep.target && dep.addSub(Dep.target);
            return value;
        },

        set(newValue) {
            if (newValue === value) {
                return;
            }
            value = newValue;
            that.walk(newValue);
            // 发送通知
            dep.notify();
        },
    });
}

实现Watcher观察者类

功能

• 当数据变化触发依赖，dep通知所有的Watcher实例更新视图
• 自身实例化的时候往dep对象中添加自己

Watcher类实现

class Watcher {
    constructor(vm, key, cb, oldValue) {
        this.vm = vm;
        this.key = key;
        // 回调函数负责更新视图
        this.cb = cb;
        this.oldValue = vm[key];
    }
    
    update() {
        let newValue = this.vm[this.key];
        if(this.oldValue === newValue) {
            return;
        }
        this.cb(newValue)
    }
}

在实例化watcher的时候，需要将自身方法添加到dep对象中。所以需要在constructor中添加几行代码

class Watcher {
    constructor(vm, key, cb, oldValue) {
        this.vm = vm;
        this.key = key;
        this.cb = cb;
        // 当前的watcher对象记录到Dep类的静态属性target
        // 触发get方法，在get方法中调用addSub
        Dep.target = this;
        
        this.oldValue = vm[key];
        
    }
}

由vue原理可以得知，我们需要在编译模版且生成dom的时候来添加watcher对象，并通过回调函数获取最新的值更新到视图上，所以我们修改compiler类的代码，需要在更新差值表达式以及指令的时候来进行更新。

compileText() {
    // 差值表达式{{ msg }}
    let reg = /\{\{(.+?)\}\}/;

    let value = node.textContent;
    if (reg.test(value)) {
        let key = RegExp.$1.trim();
        node.textContent = value.replace(reg, this.vm[key]);
        // 创建watcher对象，当数据变化更新视图
        new Watcher(this.vm, key, (newValue) => {
            node.textContent = value.replace(reg, newValue);
        });
    }
}

update(node, key, attrName) {
    let updateFn = this[`${attrName}Updater`];
    updateFn && updateFn.call(this, node, this.vm[key], key);
}

textUpdater(node, value, key) {
    node.textContent = value;
    new Watcher(this.vm, key, (newValue) => {
        node.textContent = newValue;
    });
}

modelUpdater(node, value, key) {
    node.value = value;
    new Watcher(this.vm, key, (newValue) => {
        node.value = newValue;
    });
}

我们在控制台输入vm.msg = 'hello vue', 可以看到页面已经发生变化。至此响应式已经实现。