当前位置：首页 > VUE

vue双向绑定实现

2026-02-19 20:33:05VUE

Vue 双向绑定的实现原理

Vue 的双向绑定主要通过数据劫持结合发布-订阅模式实现，核心是 Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）。以下是具体实现方式：

数据劫持（响应式原理）

Vue 2.x 使用 Object.defineProperty： 通过递归遍历数据对象的属性，将其转换为 getter/setter，在属性被访问或修改时触发依赖收集和更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`读取 ${key}`);
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      console.log(`更新 ${key}`);
      val = newVal;
      // 触发视图更新
    },
  });
}

Vue 3.x 使用 Proxy： Proxy 直接代理整个对象，无需递归遍历，性能更好且支持动态新增属性。

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key);
    },
    set(target, key, newVal) {
      if (newVal === target[key]) return true;
      console.log(`更新 ${key}`);
      Reflect.set(target, key, newVal);
      // 触发视图更新
      return true;
    },
  });
}

依赖收集与派发更新

Dep（依赖管理器）： 每个响应式属性对应一个 Dep 实例，用于存储依赖（Watcher）。

class Dep {
  constructor() {
    this.subscribers = new Set();
  }
  depend() {
    if (currentWatcher) {
      this.subscribers.add(currentWatcher);
    }
  }
  notify() {
    this.subscribers.forEach(watcher => watcher.update());
  }
}

Watcher（订阅者）： 在组件渲染时创建，负责执行更新逻辑（如重新渲染）。

class Watcher {
  constructor(updateFn) {
    this.updateFn = updateFn;
    this.update();
  }
  update() {
    currentWatcher = this;
    this.updateFn();
    currentWatcher = null;
  }
}

双向绑定的实现

模板编译： Vue 将模板编译为渲染函数，解析 v-model 指令，生成对应的数据绑定和事件监听。

v-model 示例：

<input v-model="message">

等价于：

vue双向绑定实现

<input 
  :value="message" 
  @input="message = $event.target.value"
>

完整流程

初始化阶段： 通过数据劫持监听数据变化。
编译阶段： 解析模板，为每个绑定创建 Watcher。
依赖收集： 在首次渲染时触发 getter，将 Watcher 添加到 Dep 中。
更新阶段： 数据变化时触发 setter，调用 Dep.notify() 通知所有 Watcher 更新视图。

注意事项

性能优化： Vue 3.x 的 Proxy 避免了 Vue 2.x 中递归遍历和无法监听新增属性的问题。
数组处理： Vue 2.x 需重写数组方法（如 push、pop）以实现响应式。

标签: 绑定双向

分享给朋友：

怎么用vue.js实现双向绑定

使用 v-model 指令实现双向绑定 Vue.js 提供了 v-model 指令用于在表单输入元素（如 input、textarea、select）上实现双向数据绑定。v-model 会根据控件类型…

vue实现双向

Vue 实现双向绑定的方法 Vue 主要通过 v-model 指令实现双向绑定，适用于表单元素或自定义组件。以下是几种常见实现方式：表单元素的双向绑定在表单元素（如 input、textarea…

php实现双向队列

PHP 实现双向队列的方法双向队列（Deque，Double-ended Queue）是一种允许在队列两端进行插入和删除操作的数据结构。PHP 中可以通过数组或 SplDoublyLinkedLis…

vue实现绑定页面

Vue 实现数据绑定到页面的方法 Vue.js 通过数据绑定机制实现数据和页面的同步更新，主要依赖响应式系统和模板语法。以下是几种常见的绑定方式：双向绑定 (v-model) 使用 v-model…