前言
这里来看一下 el-input 这边的 数据 和 视图的双向绑定
最开始 我以为 这部分的处理应该是 vue 这边实现的, 但是跟踪调试了一下 发现这部分的处理是业务这边 自己实现的
这部分 还是有一些 值得记录的东西, 从这里 要去理解的而是 vue 这边从宏观的框架上面来说 帮我们实现了那些数据的数据视图联动
我们这里来看一下 这里 el-input 这边的 数据 -> 视图 的同步 和 视图 -> 数据 的同步的处理
然后 这里为了调试 el-input 的代码, 需要将测试用例 放在 element-ui 的源代码中, 编译运行起来
测试用例
这里就是一个简单的 el-input 的使用, 以及一个 5s 之后更新 checkItem 的数据
然后 checkItem 数据更新之后, 会自动同步到视图, 这个就是 数据 -> 视图 的同步
如果是更新了输入框的值, 然后 checkItem 自动获取了改动后的值, 这个就是 视图 -> 数据 的同步
<template>
<div class="testParent" >
<el-input v-model="checkItem" ></el-input>
</div>
</template>
<script>
import UserDefinedModelInput from '../packages/input/src/UserDefinedModelInput';
import UserDefinedModelParent from '../packages/input/src/UserDefinedModelParent';
export default {
name: 'App',
components: {
UserDefinedModelInput,
UserDefinedModelParent,
},
data() {
return {
checkItem: 'check'
};
},
computed: {},
created() {
},
mounted() {
let _this = this;
setTimeout(function() {
_this.checkItem = 'updated check';
}, 5000);
},
methods: {
handleClick($event, item) {
console.log(' clicked item ', $event, item);
}
}
};
</script>
<style>
</style>
el-input 数据 -> 视图 的同步
我们这里主要看 两个点, 一个是 checkItem 初始化的时候, 另外有个是 checkItem 更新的时候
checkItem 初始化的时候的处理如下 nativeInputValue 是一个 computed 属性, 数据来自于 value, 即我们外面 el-input v-model 传入的 checkItem
这里是在 el-input 组件初始化的时候 就开始的一次数据同步, 将 输入框 的数据更新为业务侧初始化的数据
其次是 checkItem 5s 之后数据更新的时候
这里是 el-input 中 watch 了 nativeInputValue, 当 value 数据发生改变的时候触发了这里的 数据 -> 视图 的数据同步
处理同样是获取到 input 框, 更新它的 value
el-input 视图 -> 数据 的同步
这个是 vue 这边自己实现的, el-input 这边更新了数据之后, 提交了一个 input 事件
然后 vue 这边在 render 的父组件增加了一个 处理的回调, 来更新父组件的 checkItem
然后 checkItem 是父子组件双向同步的, 子组件能够感知到数据的变化
同时也会触发 setNativeInputValue 的回调, 这里做了 截断处理
vue 这边框架层面实现的 数据 -> 视图的绑定
这个就在 patchVNode 里面一看就好了
同步更新 属性, class, dom事件, dom属性, 样式 等等
属性主要是指的是 dom 元素的 set/getAttribute 读写的相关数据
dom属性主要是指的是 dom 元素 本身的各个字段
完
