揭秘 Vue.js v-model 的双向绑定秘密

Vue.js v-model 指令的双向绑定原理

Vue.js 为开发者提供了丰富的内置指令，其中最常用的莫过于 v-model 指令。虽然我们经常使用它，但深入了解其双向绑定原理却鲜为人知。为了深入剖析 Vue@2x 中的 v-model 指令，让我们从模板出发，逐层探索其渲染过程。

模板解析

在示例代码中，我们定义了一个简单的模板：

<div id="app">
  <input v-model="message">
</div>

解析模板的第一步是创建渲染函数。这个函数的作用是把模板转换为一个包含 DOM 节点的虚拟 DOM 树。在渲染函数中，Vue 会识别 v-model 指令，并将其转换为一个名为 withModel 的包装器函数：

withModel(create, vnode, key) {
  const modelConfig = resolveModelConfig(vnode.componentInstance);
  if (modelConfig) {
    bindModel(vnode, modelConfig);
  }
}

模型绑定

withModel 函数执行 bindModel，建立模型绑定。模型绑定是一个双向过程，它将输入控件（在本例中是 input 元素）与 Vue 实例中的数据模型连接起来。

bindModel 函数首先根据组件实例解析模型配置信息。然后，它调用 updateModel 和 on 函数来设置监听器，以便在数据模型或 input 元素发生变化时触发相应的操作：

• updateModel 函数将 input 元素的值与数据模型中的值同步。
• on 函数监听 input 元素的 input 事件，当输入值发生变化时，触发 updateModel 函数。

渲染

完成模型绑定后，Vue 会继续渲染 DOM。首先，它会创建 input 元素：

<input id="app" value="Initial message">

该元素的初始值是 "Initial message"，因为它与数据模型中的 message 属性绑定。当用户在 input 元素中输入新值时，updateModel 函数将触发，更新数据模型，然后渲染函数将更新 DOM，以反映输入值的变化。

结论

Vue.js 的 v-model 指令的双向绑定原理涉及模板解析、模型绑定和 DOM 渲染三个阶段。通过理解这些阶段，开发者可以深入了解 Vue.js 如何管理数据和界面之间的交互，并充分利用其强大功能。

---