Vue3的双向绑定是如何实现的

Posted 2023-03-15

参考技术A

Vue 的双向绑定是指数据变化能引起界面的变化，界面数据的变化也能驱动数据的改变。

这个功能其实和单向数据流规范不一样，所以开始接触 Vue 的时候非常吸引我的一个功能。我们发现 Element UI 的表单也有大量使用 v-model 进行双向绑定。

双向绑定 其实 不是所有的 元素/组件 都支持的，目前 Vue 支持 input ， select , checkbox , radio 和组件 利用 v-model 指令进行 双向绑定。

我以前对 双向绑定 这个功能有很大的一个疑惑：就是 双向绑定 为什么不会造成更新死循环？即 界面变化 -> 数据变化 -> 界面变化 -> 数据变化 -> ...

由于不同的表单元素使用的内部指令是不一样的，我们就用 input 作为例子进行分析，其他的表单元素的双向绑定原理非常类似。

这一节涉及到 指令 和 事件处理 相关的知识点，如果不是太清楚的话，建议参阅我前面的两篇相关内容，否则有可能会有一些的疑惑。

input 输入数据 -> 数据处理 -> 调用 onUpdate:modelValue 对应的 $event => (inputValue = $event) 方法 -> 响应式数据变化触发组件更新 -> input 设置新值 input.value = newValue 更新至此终止 。

指令的更新有两个方法： beforeUpdate 和 updated 。
在 beforeUpdate 中执行有两个优势：

其实等同于:

前端面试被问到，vue实现数据双向绑定，原理是什么

其原理大致是这样：

在数据渲染时使用prop渲染数据
将prop绑定到子组件自身的数据上，修改数据时修改自身数据来替代prop
watch子组件自身数据的改变，触发事件通知父组件更改绑定到prop的数据
这样做的好处是：父组件数据改变时，不会修改存储prop的子组件数据，只是以子组件数据为媒介，完成对prop的双向修改。 参考技术A 镇三山大闹青州道霹雳火夜走瓦砾场第35回