从Vue2到Vue3——Vue2中响应式原理的实现及其缺陷

在Vue2中，响应式系统是通过ES5的Object.defineProperty方法来实现数据的getter和setter，从而在数据变化时能够触发视图的更新。但是，Vue2的响应式实现存在一些缺陷和限制：

1. 对于已经创建的实例，Vue2不能动态添加响应式属性。
2. 不能检测到对象属性的添加或删除。
3. 数组的indexOf, includes等方法不是响应式的，需要使用Vue提供的方法如Vue.set或数组的特殊方法如push, pop等。
4. 需要手动实现计算属性的依赖追踪。

以下是Vue2响应式原理的简化示例代码：

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      console.log(`获取${key}：${val}`);
      return val;
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) return;
      console.log(`设置${key}：${newVal}`);
      val = newVal;
      // 假设有一个notifyChange函数来通知依赖更新
      notifyChange(key);
    }
  });
}
 
function observe(data) {
  if (typeof data !== 'object' || data === null) {
    return;
  }
 
  Object.keys(data).forEach(key => {
    defineReactive(data, key, data[key]);
  });
}
 
// 示例Vue实例的data对象
const data = { name: 'Vue2' };
observe(data);
 
// 测试响应式
data.name = 'Vue3'; // 控制台将输出设置name：Vue3

这个简化的例子展示了如何使用Object.defineProperty来定义响应式属性。在实际的Vue2中，还有更多的细节和优化，比如使用hash表来优化属性查找，提供了vm.$set方法来处理对象属性的添加，并且对数组方法进行了包裹以便跟踪变化等。