首先，我们了解一下"生命周期"这个词。通俗的来说，生命周期就是一个事务从出生到消失的过程。例如，一个人从出生到去世。在vue中，vue的生命周期是指，从创建vue对象到销毁vue对象的过程。

1. beforeCreate(创建前)
2. created(创建后)
3. beforeMount(载入前)
4. mounted(载入后)
5. beforeUpdate(更新前)
6. updated(更新后)
7. beforeDestroy(销毁前)
8. destroyed(销毁后)

Vue第一次页面加载会触发beforeCreate created beforeMount mounted四个钩子函数，DOM渲染在mounted这个周期就已经完成

生命周期图示：

1. setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
2. onBeforeMount() : 组件挂载到节点上之前执行的函数；
3. onMounted() : 组件挂载完成后执行的函数；
4. onBeforeUpdate(): 组件更新之前执行的函数；
5. onUpdated(): 组件更新完成之后执行的函数；
6. onBeforeUnmount(): 组件卸载之前执行的函数；
7. onUnmounted(): 组件卸载完成后执行的函数；
8. onActivated(): 被包含在  中的组件，会多出两个生命周期钩子函数，被激活时执行；
9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；
10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

1，vue2和vue3双向数据绑定原理发生了改变

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

vue3中使用了ES6的Proxy API对数据代理。

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

• defineProperty只能监听某个属性，不能对全对象监听
• 可以省去for in，闭包等内容来提升效率(直接绑定整个对象即可)
• 可以监听数组，不用再去单独的对数组做特异性操作vue3.x可以检测到数组内部数据的变化。

2， vue2和vue3定义数据变量和方法的改变

在vue2中定义数据变量是data(){}，创建的方法要在methods:{}中。

而在vue3中直接在setup(){}中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得 return。

如：

3，vue2和vue3生命周期钩子函数的不同

• vue2中的生命周期

  • beforeCreate 组件创建之前
  • created 组件创建之后
  • beforeMount 组价挂载到页面之前执行
  • mounted 组件挂载到页面之后执行
  • beforeUpdate 组件更新之前
  • updated 组件更新之后

• vue3中的生命周期

• setup 开始创建组件

• onBeforeMount 组价挂载到页面之前执行

• onMounted 组件挂载到页面之后执行

• onBeforeUpdate 组件更新之前

• onUpdated 组件更新之后

  而且Vue3.x 生命周期在调用前需要先进行引入。

  如：

import {
reactive,
toRefs,
onMounted,
onBeforeMount,
onBeforeUpdate,
onUpdated,
} from "vue";

• 来一个总的生命周期对比，这样更便于记忆

Vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

除了这些钩子函数外，Vue3.x还增加了onRenderTracked 和onRenderTriggered函数。

4，vue3中新加入了TypeScript和PWA的支持