面试题：Vue跨版本兼容性之基础差异

Question

在Vue 2和Vue 3中，响应式原理有明显变化。请阐述在处理数据响应式时，Vue 2使用的Object.defineProperty方法和Vue 3使用的Proxy的主要区别，以及这对跨版本兼容性可能产生的影响。

Answer 1

主要区别

1. 监测方式：
   • Object.defineProperty：Vue 2通过Object.defineProperty对对象的每个属性进行劫持，对已存在的属性进行数据劫持。例如：

let data = { name: 'John' };
Object.defineProperty(data, 'age', {
  configurable: true,
  enumerable: true,
  get() {
    console.log('get age');
    return 30;
  },
  set(newVal) {
    console.log('set age to', newVal);
  }
});

• Proxy：Vue 3使用Proxy是对整个对象进行代理，而不是对单个属性。它可以直接监听对象的变化。例如：

let data = { name: 'John' };
let proxy = new Proxy(data, {
  get(target, prop) {
    console.log('get', prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('set', prop, 'to', value);
    target[prop] = value;
    return true;
  }
});

2. 性能差异：
   • Object.defineProperty：由于需要遍历对象的每个属性并逐个定义，对于大型对象初始化时性能开销较大。并且对于数组的监测需要单独处理，通过重写数组的原型方法来实现响应式。
   • Proxy：初始化时性能相对较好，因为它是对整个对象进行代理，不需要逐个属性进行定义。同时对数组的监测也更加自然，不需要额外的原型方法重写。
3. 功能特性：
   • Object.defineProperty：无法监听对象属性的新增和删除，需要使用Vue.set和Vue.delete方法来触发响应式更新。
   • Proxy：可以监听到对象属性的新增和删除，直接在set和deleteProperty陷阱中处理，能更全面地监听对象变化。

跨版本兼容性影响

1. 代码迁移：Vue 2项目迁移到Vue 3时，由于响应式原理的变化，涉及数据响应式处理的代码可能需要修改。例如，在Vue 2中通过Vue.set添加新属性来触发响应式的代码，在Vue 3中不需要这样做，直接添加新属性即可触发响应式更新。
2. 第三方库兼容性：部分依赖Vue 2响应式原理实现的第三方库，在Vue 3环境下可能无法正常工作，需要更新第三方库以适应Vue 3的响应式机制。例如，一些自定义的数据劫持插件，基于Object.defineProperty实现，在Vue 3中需要重写以适配Proxy。