当前位置：首页 > VUE

vue实现数据双向绑定

2026-01-22 07:41:46VUE

Vue 数据双向绑定的实现原理

Vue 的数据双向绑定主要通过 v-model 指令实现，其核心是基于数据劫持和发布-订阅模式。以下是关键实现机制：

数据劫持（响应式原理）

Vue 使用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）劫持数据的访问和修改。当数据变化时，触发对应的 setter 函数，通知依赖的视图更新。

// Vue 2 实现示例
const data = { value: '' };
Object.defineProperty(data, 'value', {
  get() {
    return this._value;
  },
  set(newVal) {
    this._value = newVal;
    console.log('数据更新，触发视图渲染');
  }
});

发布-订阅模式

通过 Dep（依赖收集器）和 Watcher（观察者）实现：

每个响应式属性有一个 Dep 实例，用于收集依赖（Watcher）。
当数据变化时，Dep 通知所有 Watcher 更新视图。

`v-model` 的实现

v-model 是语法糖，本质上是 :value 绑定和 @input 事件的组合：

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

Vue 2 与 Vue 3 的实现差异

Vue 2 的实现

基于 Object.defineProperty 劫持数据，无法检测新增/删除的属性。
对数组方法（如 push、pop）进行重写以实现响应式。

Vue 3 的实现

使用 Proxy 代理整个对象，支持动态新增/删除属性。
性能优化：惰性触发更新，减少不必要的渲染。

// Vue 3 Proxy 示例
const data = new Proxy({ value: '' }, {
  get(target, key) {
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    console.log('数据更新，触发视图渲染');
    return true;
  }
});

手动实现简易双向绑定

以下是一个基于 Object.defineProperty 的简易实现：

<input id="input" type="text">
<div id="display"></div>

<script>
  const data = { value: '' };
  const input = document.getElementById('input');
  const display = document.getElementById('display');

  // 数据劫持
  Object.defineProperty(data, 'value', {
    get() { return this._value; },
    set(newVal) {
      this._value = newVal;
      display.innerText = newVal; // 更新视图
    }
  });

  // 监听输入事件
  input.addEventListener('input', (e) => {
    data.value = e.target.value; // 更新数据
  });
</script>