当前位置：首页 > news >正文

v-model 原理详解

news 2025/11/16 10:43:15

v-model 是 Vue.js 中用于实现双向数据绑定的重要指令，它本质上是一个语法糖，将数据绑定和事件监听结合在一起。

基本实现原理

1. 在表单元素上的实现

对于表单元素，v-model 实际上是 :value 和 @input 的语法糖：

<!-- 使用 v-model -->
<input v-model="message"><!-- 等价于 -->
<input :value="message" @input="message = $event.target.value">

原理分解：

:value=“message”：将数据从 Vue 实例绑定到 input 的 value 属性
@input=“message = $event.target.value”：监听 input 事件，当输入值时更新数据

2. 不同表单元素的处理

Vue 针对不同类型的表单元素进行了适配：

<!-- 文本框 -->
<input v-model="text" type="text"><!-- 多行文本 -->
<textarea v-model="text"></textarea><!-- 复选框 -->
<input v-model="checked" type="checkbox"><!-- 单选按钮 -->
<input v-model="picked" type="radio" value="one"><!-- 下拉选择 -->
<select v-model="selected"><option value="A">A</option>
</select>

在自定义组件中的实现

1. 默认行为

在自定义组件中使用 v-model 时：

<custom-input v-model="message"></custom-input>

等价于：

<custom-input :value="message" @input="message = $event">
</custom-input>

2. 组件内部实现

自定义组件需要这样实现：

<template><input:value="value"@input="$emit('input', $event.target.value)">
</template><script>
export default {props: ['value'],// 或者使用 model 选项（Vue 2.x）model: {prop: 'value',event: 'input'}
}
</script>

Vue 2 与 Vue 3 的区别

Vue 2 中的 v-model

<!-- 父组件 -->
<child-component v-model="pageTitle"></child-component><!-- 等价于 -->
<child-component :value="pageTitle" @input="pageTitle = $event"></child-component><!-- 子组件 -->
<script>
export default {model: {prop: 'title',event: 'change'},props: {title: String},methods: {updateValue(value) {this.$emit('change', value)}}
}
</script>

Vue 3 中的 v-model：Vue 3 进行了重大改进，支持多个 v-model

<!-- 父组件 -->
<child-component v-model:title="pageTitle" v-model:content="pageContent"></child-component><!-- 等价于 -->
<child-component :title="pageTitle" @update:title="pageTitle = $event":content="pageContent" @update:content="pageContent = $event">
</child-component><!-- 子组件 -->
<script>
export default {props: {title: String,content: String},methods: {updateTitle(title) {this.$emit('update:title', title)},updateContent(content) {this.$emit('update:content', content)}}
}
</script>

修饰符处理

v-model 支持修饰符，如 .lazy、.number、.trim：

<input v-model.lazy="msg">    <!-- 在 change 事件后同步 -->
<input v-model.number="age">  <!-- 自动转为数字 -->
<input v-model.trim="msg">    <!-- 自动去除首尾空格 -->

原理实现：

// 伪代码展示修饰符处理原理
function processModelModifiers(value, modifiers) {if (modifiers.trim) {value = value.trim()}if (modifiers.number) {value = Number(value)}return value
}

源码层面的实现

在 Vue 的编译阶段，v-model 会被转换成相应的代码：

// 编译前的模板
<input v-model="message">// 编译后的渲染函数
function render() {return _c('input', {directives: [{name: "model",value: (message),expression: "message"}],domProps: {"value": (message)},on: {"input": function ($event) {if ($event.target.composing) return;message = $event.target.value}}})
}