当前位置：首页 > VUE

vue实现数据双向

2026-02-19 18:35:22VUE

Vue 实现数据双向绑定

Vue 中实现数据双向绑定的核心机制是 v-model 指令，主要用于表单元素（如 input、textarea、select 等）。其本质是语法糖，结合了 :value 绑定和 @input 事件监听。

基础用法

在表单元素上直接使用 v-model，绑定一个响应式数据属性：

<input v-model="message" />
<p>{{ message }}</p>

对应的 JavaScript 部分：

data() {
  return {
    message: ''
  }
}

自定义组件实现双向绑定

在自定义组件中实现类似 v-model 的功能，需遵循 Vue 的约定：

组件通过 model 选项或 v-bind:value + v-on:input 实现双向绑定。

Vue 2.x 示例：

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

组件内部：

props: ['value'],
methods: {
updateValue(newValue) {
 this.$emit('input', newValue);
}
}

模板部分：

vue实现数据双向

<input :value="value" @input="updateValue($event.target.value)" />

Vue 3.x 使用 v-model 的改进：

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

组件内部：

props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(newValue) {
 this.$emit('update:modelValue', newValue);
}
}

修饰符

Vue 提供 v-model 修饰符以处理特定场景：

.lazy：将 input 事件改为 change 事件（延迟同步）
.number：自动将输入转为数字类型
.trim：自动去除首尾空格

示例：

vue实现数据双向

<input v-model.lazy="message" />

多选框与单选组

多选框绑定数组：

<input type="checkbox" v-model="selectedItems" value="item1">
<input type="checkbox" v-model="selectedItems" value="item2">

数据部分：

data() {
  return {
    selectedItems: []
  }
}

单选按钮绑定字符串：

<input type="radio" v-model="picked" value="one">
<input type="radio" v-model="picked" value="two">

深层原理

Vue 的双向绑定基于响应式系统：

通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据变化。
发布-订阅模式通知依赖更新。
模板编译阶段解析 v-model 为对应的绑定和事件。

对于需要手动实现的情况，可参考以下模式：

// 简易数据劫持示例
function observe(obj) {
  Object.keys(obj).forEach(key => {
    let internalValue = obj[key];
    Object.defineProperty(obj, key, {
      get() {
        return internalValue;
      },
      set(newVal) {
        internalValue = newVal;
        // 触发更新
      }
    });
  });
}