手撕Vue-数据驱动界面改变上

合集 - 手写Vue全家桶(16)

1.Vue双向数据绑定原理-上2023-09-272.Vue双向数据绑定原理-中2023-09-303.Vue双向数据绑定原理-下2023-09-304.手撕Vue-构建Vue实例2023-10-035.手撕Vue-提取元素到内存2023-10-146.手撕Vue-查找指令和模板2023-10-157.手撕Vue-编译指令数据2023-10-158.手撕Vue-编译模板数据2023-10-159.手撕Vue-监听数据变化2023-10-15

10.手撕Vue-数据驱动界面改变上2023-10-15

11.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-1913.手撕Vue-界面驱动数据更新2023-10-2114.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

经过上一篇的介绍，已经实现了监听数据的变化，接下来就是要实现数据变化后，界面也跟着变化，这就是数据驱动界面改变。

想要实现数据变化之后更新UI界面，我们可以使用发布订阅模式来实现，先定义一个观察者类, 再定义一个发布订阅类, 然后再通过发布订阅的类来管理观察者类。

接下来我们就来实现这个代码。

定义一个观察者类，观察属性的变化，当属性变化时，触发回调函数。

class Watcher {
    constructor(vm, attr, cb) {
        this.vm = vm;
        this.attr = attr;
        this.cb = cb;

        // 在创建观察者对象的时候就去获取当前的旧值
        this.oldValue = this.getOldValue();
    }

    getOldValue() {
        return CompilerUtil.getValue(this.vm, this.attr);
    }

    /**
     * 更新的方法, 用于判断新值和旧值是否相同
     * 如果不相同, 那么就调用回调函数
     */
    update() {
        let newValue = CompilerUtil.getValue(this.vm, this.attr);

        if (newValue !== this.oldValue) {
            this.cb(newValue, this.oldValue);
        }
    }
}

上方的类中主要有三个属性，分别是vm, attr, cb，vm是Vue的实例，attr是属性名，cb是回调函数。

定义了一个getOldValue方法，用于获取旧值，这个方法在创建观察者对象的时候就会调用，用于获取旧值。

定义了一个update方法，用于更新数据，当数据发生变化时，就会调用这个方法，用于判断新值和旧值是否相同，如果不相同，就调用回调函数。

接下来我们就来定义一个发布订阅类，用于管理观察者对象。

class Dep {
    constructor() {
        // 这个数组就是专门用于管理某个属性所有的观察者对象的
        this.subs = [];
    }

    /**
     * 订阅观察的方法
     * @param watcher 观察者对象
     */
    addSub(watcher) {
        this.subs.push(watcher);
    }

    /**
     * 发布订阅的方法
     */
    notify() {
        this.subs.forEach(watcher => watcher.update());
    }
}

上方的类中主要有两个方法，分别是addSub和notify：

• addSub方法用于订阅观察的方法，将观察者对象添加到数组中。
• notify方法用于发布订阅的方法，遍历数组中的观察者对象，调用观察者对象的update方法。

构造器中定义了一个数组，用于管理某个属性所有的观察者对象。

好了，现在我们已经定义了观察者类和发布订阅类，先到此为止，下一篇文章再继续。