# 前言
有些小伙伴在理解 Vue 的响应式原理的时候，可能会认为 Vue 的响应式是双向绑定的，但实际上这是不准确的，所谓数据的双向绑定可以体现为以下两部分：
- 数据流向
DOM的绑定：数据的更新最终映射到对应的视图更新。 DOM流向数据的绑定：操作DOM的变化引起数据的更新。
我们在前面的章节花了不少篇幅介绍了响应式原理，其实这块就是着重在介绍数据流向 DOM 的过程。
在 Vuejs 中，我们则会经常通过 v-model 指令来实现数据的 “双向绑定”。 v-model 指令既可以作用在普通表单元素，也可以作用在一些组件上。接下来我们将分别介绍这两种情况的实现原理。
# 表单元素
在使用 Vuejs 编写表单类的 UI 控件时，经常会使用 v-model 指令来为 <input>、<select>、<textarea> 进行数据的双向绑定。
我们使用 Vue 提供的官方模版转换工具来尝试一下在 <input>、<select>、<textarea> 输入类型的表单中使用 v-model 指令会被编译成什么样子：
模版：
html
复制代码<input v-model='value1' />
<textarea v-model='value2' />
<select v-model='value3' />
@前端进阶之旅: 代码已经复制到剪贴板
编译结果
import { vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, vModelSelect as _vModelSelect, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = ["onUpdate:modelValue"]
const _hoisted_2 = ["onUpdate:modelValue"]
const _hoisted_3 = ["onUpdate:modelValue"]
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_withDirectives(_createElementVNode("input", {
"onUpdate:modelValue": $event => ((_ctx.value1) = $event)
}, null, 8 /* PROPS */, _hoisted_1), [
[_vModelText, _ctx.value1]
]),
_withDirectives(_createElementVNode("textarea", {
