特殊元素指令-双向绑定是如何实现的|Vue3原理 | 前端进阶之旅

# 前言

有些小伙伴在理解 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", {