当前位置：首页 > VUE

vue双向实现

2026-02-25 15:34:36VUE

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

Vue 的双向数据绑定主要通过 v-model 指令实现，结合数据劫持（Object.defineProperty 或 Proxy）和发布-订阅模式完成。以下是核心实现方式：

基于 `Object.defineProperty` 的实现

数据劫持（响应式化）
通过 Object.defineProperty 监听对象属性的读取和修改：

function defineReactive(obj, key, val) {
  const dep = new Dep(); // 依赖收集器
  Object.defineProperty(obj, key, {
    get() {
      dep.depend(); // 收集当前依赖
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      dep.notify(); // 通知更新
    }
  });
}

依赖收集与触发
依赖管理器 Dep 和观察者 Watcher 实现订阅-发布：

class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (Dep.target) this.subscribers.push(Dep.target);
  }
  notify() {
    this.subscribers.forEach(watcher => watcher.update());
  }
}

v-model 的语法糖
v-model 本质是 :value 和 @input 的简写：

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

基于 `Proxy` 的实现（Vue 3）

Vue 3 使用 Proxy 替代 Object.defineProperty，解决深层对象监听和数组限制：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key); // 依赖收集
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      Reflect.set(target, key, value);
      trigger(target, key); // 触发更新
      return true;
    }
  });
}

自定义双向绑定实现示例

组件内实现
通过 props 和 $emit 实现父子组件双向绑定：

Vue.component('CustomInput', {
  props: ['value'],
  template: `
    <input 
      :value="value" 
      @input="$emit('input', $event.target.value)"
    >
  `
});