手撕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-1510.手撕Vue-数据驱动界面改变上2023-10-15

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

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

收起

经过上一篇的介绍，已经实现了观察者模式的基本内容，接下来要完成的就是将上一篇的发布订阅模式运用到 Nue 中，实现数据驱动界面改变。

在监听数据变化的章节当中，根据指定的区域和数据去编译渲染界面 这个步骤处，我写了一个注释，这个注释是这样的：第一步：给外界传入的所有数据都添加get/set方法，第二步就是在第一步的基础上，给所有属性都添加观察者对象，当数据发生变化时，发布订阅触发观察者对象的回调函数重新渲染界面。

先处理下 v-model 的情况，找到 CompilerUtil 中的 model 方法，将其修改添加观察者对象代码:

model: function (node, value, vm) {
    // 第二部：在第一次渲染的时候, 就给所有的属性添加观察者
    new Watcher(vm, value, (newValue, oldValue) => {
        node.value = newValue;
    });

    node.value = this.getValue(vm, value);
},

这样就完成了第二步，接下来第三步就是将当前属性的所有观察者对象都放到当前属性的发布订阅对象中管理起来

在创建观察者对象的时候，在构造函数当中，会调用 getOldValue 方法，会调用 CompilerUtil.getValue 方法，这个方法就是用于获取属性值的，在编译模板之前已经给所有属性添加了 get/set 方法，所以在获取属性值的时候，就会触发 get 方法，我们就可以在 get 方法中将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来。

在 Observer 类中的 defineRecative 方法中添加如下代码:

defineReactive(obj, attr, value) {
    this.observer(value);

    // 第三步：将当前属性的所有观察者对象都放到当前属性的发布订阅对象中管理起来
    // 创建属于当前属性的发布订阅对象
    let dep = new Dep();

    Object.defineProperty(obj, attr, {
        get() {
            Dep.target && dep.addSub(Dep.target);
            return value;
        },
        set: (newValue) => {
            if (value !== newValue) {
                this.observer(newValue);
                value = newValue;
                dep.notify();
                console.log('监听到数据的变化, 需要去更新UI');
            }
        }
    })
}

在上述代码中，创建了一个属于当前属性的发布订阅对象，然后在 get 方法中，判断 Dep.target 是否存在，如果存在，就将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来。Dep.target 就是当前属性的观察者对象，这里该需要在改造一下观察者的类，将观察者对象添加到 Dep.target 中，放在全局中管理起来。等到所有的属性都添加完观察者对象之后，就将 Dep.target 置为 null。

改造观察者类中的 getOldValue 方法, 这样在 get 方法中就可以将当前属性的观察者对象添加到当前属性的发布订阅对象中管理起来了:

getOldValue() {
    Dep.target = this;
    let oldValue = CompilerUtil.getValue(this.vm, this.attr);
    Dep.target = null;
    return oldValue;
}

这样就完成了数据驱动界面改变的功能，接下来我们就来测试一下，打开浏览器控制台，更改下数据，看看是否会触发界面的重新渲染，如下图所示:

好了到此为止，我们已经完成了 v-model 数据驱动界面改变的功能。

下面我将以 debugger 的形式来讲解一下整个数据驱动界面改变的过程, 在 defineReactive get 方法中打上断点，如下图所示:

返回浏览器，主要关注调用栈，如下图所示:

自己从下依次往上看，就可以看到整个数据驱动界面改变的过程了，这里我就不一一截图了，大家可以自己去看一下。

如上是 get 方法代码的执行流程，那么 set 的我也可以说明一下，set 方法的 debugger 不是打在 defineReactive 中，而是打在 Watcher 类中的 update 方法中，所执行的回调函数当中，如下图所示:

返回浏览器，打开控制台更改数据触发 set 方法，发布订阅触发 update 方法：

这次也是主要关注调用栈，自己从下依次往上看，就可以看到整个数据驱动界面改变的过程了，这里我就不一一截图了，大家可以自己去看一下，如下图所示: