当前位置：首页 > VUE

Vue数据绑定实现

2026-01-16 21:10:45VUE

Vue 数据绑定的核心机制

Vue 的数据绑定基于响应式系统，通过 Object.defineProperty 或 Proxy 实现。当数据变化时，视图自动更新。

双向绑定的实现方式

v-model 指令

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

v-model 是 v-bind:value 和 v-on:input 的语法糖，适用于表单元素。

手动实现双向绑定

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

单向数据绑定的实现

插值表达式

Vue数据绑定实现

<span>{{ dataProperty }}</span>

v-bind 指令

<a v-bind:href="url">链接</a>
<!-- 简写 -->
<a :href="url">链接</a>

响应式原理的底层实现

基于 Object.defineProperty

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        // 触发更新
      }
    }
  });
}

基于 Proxy（Vue 3）

Vue数据绑定实现

const reactive = (target) => {
  return new Proxy(target, {
    get(target, key) {
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      Reflect.set(target, key, value);
      // 触发更新
      return true;
    }
  });
};

计算属性和侦听器

计算属性

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

侦听器

watch: {
  counter(newVal, oldVal) {
    // 响应数据变化
  }
}

数组的响应式处理

Vue 对数组方法进行了重写，包括 push、pop、shift、unshift、splice、sort 和 reverse，以触发视图更新。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
  const original = arrayProto[method];
  arrayMethods[method] = function(...args) {
    const result = original.apply(this, args);
    // 触发更新
    return result;
  };
});