Vue 响应式原理与源码实现详解

2023-11-14 10:49:13

Vue响应式系统：揭秘数据绑定的秘密

响应式原理

Vue响应式系统是双向数据绑定的基石，它允许数据模型和用户界面之间保持同步。其原理是利用JavaScript的Object.defineProperty()方法对数据对象进行"劫持"，当数据发生变化时，会触发getter和setter，从而达到响应式更新的效果。

实现步骤

1. defineReactive简单版

function defineReactive(data, key, value) {
  Object.defineProperty(data, key, {
    get: function() {
      return value;
    },
    set: function(newValue) {
      if (value !== newValue) {
        value = newValue;
        // 触发更新
        ...
      }
    }
  });
}

这个版本简单地定义了一个响应式属性，当该属性的值发生变化时，触发一个更新函数。

2. defineReactive闭包版

为了避免getter和setter被覆盖，可以利用闭包保存value的值：

function defineReactive(data, key, value) {
  const temp = value;
  Object.defineProperty(data, key, {
    get: function() {
      return temp;
    },
    set: function(newValue) {
      if (temp !== newValue) {
        temp = newValue;
        // 触发更新
        ...
      }
    }
  });
}

3. 完善实现

深度响应

为了实现数据的深度响应，需要对嵌套对象进行遍历，并对其每个属性调用defineReactive：

const observe = function(value) {
  if (typeof value === 'object' && value !== null) {
    for (const key in value) {
      defineReactive(value, key, value[key]);
    }
  }
};

代理对象

为了方便操作数据，Vue使用Proxy代理数据对象：

const proxy = new Proxy(data, {
  get: function(target, prop) {
    if (typeof target[prop] === 'object' && target[prop] !== null) {
      return observe(target[prop]);
    } else {
      return target[prop];
    }
  },
  set: function(target, prop, value) {
    if (target[prop] !== value) {
      target[prop] = value;
      // 触发更新
      ...
    }
    return true;
  }
});