Question

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

Answer 1

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 中执行有两个优势：

其实等同于: