经过上一篇文章，已经将数据驱动界面改变的过程实现了，本章节将实现界面驱动数据更新的过程。
界面驱动数据更新的过程，主要是通过 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 了）好了，这样就实现了界面驱动数据更新的过程。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
