【Vue.js 2.x源码解析】第27章 Vue 源码中 v-model 的实现细节

想深入了解Vue 2.x 源码底层原理实现，从编译系统、渲染系统到响应式系统 vue-router和vuex 等实现方式可以关注 『Vue.js 2.x源码精讲』 专栏 或 查看专栏目录了解详情

作为前端开发，我们在工作中经常使用 v-model 来处理表单元素或组件的数据绑定问题。很多人觉得 v-model 是双向绑定的核心体现，但其实它的本质只是 Vue 提供的语法糖，最终还是通过事件监听和数据响应实现的。今天就通过源码带大家深度剖析 v-model 的实现。

---

表单元素中的 v-model

示例代码

这个例子中，我们在 <input> 上绑定了 v-model，表面上看，message 的变化会同步到 DOM，而用户输入的值也会反映到数据中。那么背后发生了什么呢？

---

源码分析

1. 编译阶段
   在编译模板时，v-model 被视为一个普通的指令，解析后加入 el.directives 数组中。接着，在代码生成阶段（codegen），调用 genDir