手撕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-1511.手撕Vue-数据驱动界面改变中2023-10-1512.手撕Vue-数据驱动界面改变下2023-10-19

13.手撕Vue-界面驱动数据更新2023-10-21

14.手撕Vue-实现事件相关指令2023-10-2115.手撕Vue-实现将数据代理到Vue实例2023-10-2116.手撕Vue-实现计算属性2023-10-21

收起

经过上一篇文章，已经将数据驱动界面改变的过程实现了，本章节将实现界面驱动数据更新的过程。

界面驱动数据更新的过程，主要是通过 v-model 指令实现的, 只有 v-model 指令才能实现界面驱动数据更新的过程。

好了，那么说了是通过 v-model 那么直接处理下 CompilerUtil 中的 model 方法就好了。

只需要在 model 方法在加几行代码即可实现界面驱动数据更新的过程（双向绑定的功能）。

首先说一下思路，监听文本框的输入事件，当文本框的值发生改变时，通过事件对象 e 获取到文本框最新输入的值，将最新的值设置到模型当中这样是不是就可以了。

但是在设置到模型当中有一个注意点：

!> 在 model 方法中，在参数列表中将属性的名称以参数的形式已经传递过来了，但是这个属性的名称有可能是 name, 也有可能是 person.name, 也有可能是一个多级的，这个时候就需要一级一级取，取到最后一级，给最后一级设置值就可以了。

所以我这里就专门在编写一个方法用来设置值，叫做 setValue, 我将 vm, attr, 以及最新的值 value 也穿递过去，然后在 setValue 方法中，先将 attr 以 . 分割成数组，然后通过循环遍历数组，将 vm 的值一级一级取出来，直到取到最后一级，给最后一级设置值就可以了。

好了废话不多说，直接上代码, CompilerUtil 中 setValue：

setValue(vm, attr, newValue) {
    attr.split('.').reduce((data, currentAttr, index, arr) => {
        if (index === arr.length - 1) {
            data[currentAttr] = newValue;
        }
        return data[currentAttr];
    }, vm.$data)
},

然后在 model 方法中, 监听文本框的输入事件在调用 setValue 方法，将 vm, attr, 以及最新的值 value 也穿递过去，代码如下：

// 监听文本框的输入事件
node.addEventListener('input', (e) => {
    let newValue = e.target.value;
    this.setValue(vm, value, newValue);
});

打开浏览器，输入框输入内容，发现数据已经更新了（不录制 gif 了）好了，这样就实现了界面驱动数据更新的过程。