1、生命周期，Vue2 vs Vue3

1、生命周期，Vue2 vs Vue3

选项式 API（Vue2） Hook inside setup（Vue3）

beforeCreate Not needed

created Not needed

beforeMount onBeforeMount

mounted onMounted

beforeUpdate onBeforeUpdate

updated onUpdated

beforeUnmount onBeforeUnmount

unmounted onUnmounted

errorCaptured onErrorCaptured

renderTracked onRenderTracked

renderTriggered onRenderTriggered

activated（组件被<keep-alive>包含） onActivated（组件被<keep-alive>包含）

deactivated（组件被<keep-alive>包含） onDeactivated（组件被<keep-alive>包含）

Hook inside setup，顾名思义，VCA 建议在 setup 这个大方法里面写我们的各种逻辑功能点。

2、vue2和vue3双向数据绑定原理

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。

vue3 中使用了 es6 的 ProxyAPI 对数据代理。

相比于vue2.x，使用proxy的优势如下

defineProperty只能监听某个属性，不能对全对象监听

可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

Vue2 响应式的基本原理，就是通过 Object.defineProperty，但这个方式存在缺陷。使得 Vue 不得不通过一些手段来 hack，如：

Vue.$set() 动态添加新的响应式属性

无法监听数组变化，Vue 底层需要对数组的一些操作方法，进行再封装。如 push，pop 等方法。

而在 Vue3 中优先使用了 Proxy 来处理，它代理的是整个对象而不是对象的属性，可对于整个对象进行操作。不仅提升了性能，也没有上面所说的缺陷。

简单举两个例子：

动态添加响应式属性

const targetObj = { id: '1', name: 'zhagnsan' };
const proxyObj = new Proxy(targetObj, {
  get: function (target, propKey, receiver) {
    console.log(`getting key：${propKey}`);
    return Reflect.get(...arguments);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting key：${propKey}，value：${value}`);
    return Reflect.set(...arguments);
  }
});
proxyObj.age = 18;
// setting key：age，value：18

如上，用 Proxy 我们对 proxyObj 对象动态添加的属性也会被拦截到。

Reflect 对象是ES6 为了操作对象而提供的新 API。它有几个内置的方法，就如上面的 get / set，这里可以理解成我们用 Reflect 更加方便，否则我们需要如：

get: function (target, propKey, receiver) {
  console.log(`getting ${propKey}!`);
  return target[propKey];
},

对数组的操作进行拦截

const targetArr = [1, 2];

const proxyArr = new Proxy(targetArr, {

set: function (target, propKey, value, receiver) {

console.log(`setting key：${propKey}，value：${value}`);

return Reflect.set(...arguments);

}

});

proxyArr.push('3');

// setting key：2，value：3

// setting key：length，value：3