手撕Vue-界面驱动数据更新

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

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

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

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

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

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

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

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

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

javascript 复制代码
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 也穿递过去,代码如下:

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

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

相关推荐
BNTang1 年前
手撕Vue-实现事件相关指令
手写vue全家桶
BNTang1 年前
手撕Vue-数据驱动界面改变下
手写vue全家桶
BNTang1 年前
手撕Vue-编译指令数据
手写vue全家桶
BNTang1 年前
手撕Vue-查找指令和模板
手写vue全家桶