53 v-bind 和 v-model 的实现和区别

前言

这个主要的来源是偶尔的情况下出现的问题

就比如是 el-select 中选择组件之后, 视图不回显, 然后 model 不更新等等

这个其实就是 vue 中视图 -> 模型的数据同步, 我们通常意义上的处理一般是通过模型 -> 数据的数据同步, 比如我们代码里面更新了 model.sex 从 ”男” 更新为 ”女”, 然后 el-input 中对应的输入框的值也从从 ”男” 更新为 ”女”

然后我们这里关注的问题是, 比如我在 el-input 将 “男” 更新为 “女”, 传递到 model.sex 的问题

我们这里主要关注的就是 v-model 和 v-bind 的具体实现

然后这个在以前初学的情况下, 视图 -> 模型的同步问题

这里来看一下这个问题的细节

主要的传递方式为 v-model 和 v-bind, “v-bind:value“ 可以简写为 “:value”

v-model 是视图 <-> 模型数据双向同步的

v-bind 是模型 -> 视图数据单向同步的

然后这种视图 -> 模型数据不同步的情况一般是 v-bind 的情况

其他的一些情况模型 -> 视图数据不同步的情况, 可以参见

el-dialog 的 appendToBody 属性, 导致 vue 响应式失效

el-tree defaultCheckedKeys配置和树上面选中节点不同步问题

特定的操作之后响应式对象不“响应“了(一)

特定的操作之后响应式对象不“响应“了(二)

直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了

测试用例

测试用例如下

<template><div class="testParent" ><el-select :value="model.sex"  >
<!--    <el-select v-model="model.sex"  >--><el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code"></el-option></el-select><!--      <el-input :value="model.sex" ></el-input>-->
<!--      <el-input v-model="model.sex" ></el-input>--></div>
</template><script>export default {name: 'App',components: {},data() {return {model: {sex: "1"},sexList: [{code: "1", name: "男"},{code: "2", name: "女"},]};},computed: {},created() {},mounted() {let _this = thissetInterval(function() {_this.model.sex = "2"console.log("--", _this.model)}, 3000)},methods: {}};
</script><style></style>

可以看到的是通过 v-bind 绑定的数据, 操作了界面, 但是界面没有更新, 界面没有更新是因为数据没有更新

v-mode 和 v-bind 的差异

当代码为 v-bind 的时候, 我们看一下 el-select 的模部分的处理, 只是传入了一个 value 的值

绑定数据为 v-model 的时候, 除了注册 value 的绑定之外, 还注册了一个 callback 回调

这个 callback 回调, 就是视图 -> 模型数据同步的一个关键的地方

视图上有数据更新的话, 视图的处理回调链路上面会增加一个这个回调, 来更新 vm.model.sex 的数据, 使得模型拿到的是视图的最新的数据

v-model 的数据绑定和视图->数据处理函数的绑定

在 v-model 的情况如下

这里将 model 中的配置提取到了 props 和事件映射中

v-model 如果配置属性名称, 默认取 value, 如果没有配置事件名称, 默认取 input 事件

我们这里关注的属性, 这里 props 配置为 props[value] = “1”

接下来就是, 从 attrs, props 中提取需要传递给子组件的 props 数据

这里可以看到上面的 v-model 转换之后的结果, 传入给子组件的 value 为 “1”, 注册了一个 input 的处理函数, 其中包含了 _vm.$set(_vm.model, “sex”, $$v) 的回调处理

从 attrs 和 props 中采集需要传递给子组件的属性列表, 优先从 props 中获取

v-bind 的数据绑定

这边的数据绑定是通过 attrs 来进行交互的

app.vue 上面生成了创建 el-select 的时候, 需要传入 value = “1”

这里从 attrs 中解析需要传递给子组件的 props 数据

注意这里没有 input 的回调处理事件, 这个在 app.vue 变异之后的结果中也能看到

数据 -> 视图的初次绑定

是在 el-select 的 mounted 中, 这里获取 value 对应的 option

然后更新选中的对象, 选中的 label 展示给用户

这里的 selectedLabel 为 el-select 这边展示给用户的选中的数据的标签, 这个具体可以参见 el-select 的实现

el-select 中展示给用户的输入框

数据 -> 视图的同步绑定

这个是基于 vue 本身的响应式机制, 响应式属性更新的时候回级联更新属性, class, dom事件, dom属性, 样式等等

这个就在 patchVNode 里面一看就好了

同步更新属性, class, dom事件, dom属性, 样式等等

属性主要是指的是 dom 元素的 set/getAttribute 读写的相关数据

dom属性主要是指的是 dom 元素本身的各个字段

注意 v-bind 虽然没有视图 -> 数据的同步绑定, 但是它的数据 -> 视图的绑定这部分是由 vue 本身的响应式机制提供支持的, 是没有问题的

将 el-select 的 value 传入更新为 :value="model.sex", 然后三秒之后 model.sex 在 setInterval 中更新, 然后可以看到视图也更新了

v-model 中视图 -> 数据的同步绑定

整个流程是通过 vue 的 input 事件串联起来的

用户这边点击的是 select 下面的 option, 实现 option 的 dom 元素是一个 li, li 上面注册了一个 click 事件, 如下, 提交了一个事件给父组件

select 组件这边处理的时候, 又给父组件提交了一个 input 事件, 携带了最新的 value

select 的父组件就是我们这边的业务组件了, 由编译的时候注册了一个 input 事件的处理函数

这里 $$v 拿到的是用户选择的最新的值, 然后这里的通过 input 事件的回调来更新了模型上面的数据

项目中可能碰到的 v-model 双向绑定失效的情况

这种情况主要的来源是绑定的对象不是响应式对象, 因此造成了 el-select 提交 input 事件之后, 业务组件这边虽然有 _vm.$set(_vm.model, "sex", $$v), 但是 model.sex 不是响应式对象, 造成了级联更新通知, 等等存在问题

注意观察如下的 model.sex 属性, 是在函数中使用 model.sex 创建的属性, 这种方式创建的属性不是响应式的, 然后导致了上面的问题, 所以编码的时候, 视图中使用到的属性, 最好是在 data 中枚举出来, 避免一些不必要的响应式的问题

复现的方式如下

<template><div class="testParent" >
<!--    <el-select :value="model.sex"  >--><el-select v-model="model.sex"  ><el-option v-for="item in sexList" :key="item.code" :label="item.name" :value="item.code"></el-option></el-select><!--      <el-input :value="model.sex" ></el-input>-->
<!--      <el-input v-model="model.sex" ></el-input>--></div>
</template><script>export default {name: 'App',components: {},data() {return {model: {},sexList: [{code: "1", name: "男"},{code: "2", name: "女"},]};},computed: {},created() {},mounted() {let _this = this_this.model.sex = "1"setInterval(function() {_this.model.sex = "2"console.log("--", _this.model)}, 3000)},methods: {}};
</script><style></style>

如下, model.sex 没有响应式的 setter, getter, el-select 中虽然提交了一个 input 的事件

业务组件这边也有 _vm.$set(_vm.model, "sex", $$v) 处理, 但是这里仅仅是更新了 model.sex 的值, 没有响应式的相关级联操作

因此造成了数据通知给 el-select 存在问题, 然后造成了 el-select 这边, 虽然我们点击了该 option, 但是最终的结果就像是没有点击一样