Vue3新版本的理念成型于 2018 年末，当时的 Vue 2 已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，Vue3在2020年正式推出，在源码和API都有较大变化，性能得到了显著的提升，比Vue2.x快1.2~2倍。
一、Vue3的新特性
- 速度更快
- 重写了虚拟Dom实现
- 编译模板的优化
- 更高效的组件初始化
- undate性能提高1.3~2倍
- SSR速度提高了2~3倍
- 体积减少
- 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
- 对使用者，打包出来的包体积变小了
- 更易维护
- compositon Api可与现有的Options API一起使用
- 灵活的逻辑组合与复用
- Vue3模块可以和其他框架搭配使用
- VUE3是基于typescipt编写的，可以享受到自动的类型定义提示
- 更接近原生
- 可以自定义渲染 API
- 更易使用
- 响应式 Api 暴露出来
Vue 3 生命周期是指 Vue 组件从创建到销毁的整个过程，包括创建阶段、挂载阶段、更新阶段和销毁阶段。，就好比人生一样出生、上学、工作，vue3的生命周期和vue2有一些命名不一样，我们将之对比。
二、vue3 与 vue2 生命周期对比
| vue2 | vue3 | 说明 |
| beforeCreate | setup() | 开始创建组件之前,实例被创建，还没有初始化好data和methods等属性 |
| created | setup() | 已初始化好data和method等，但还没有开始编译模板 |
| eforeMount | onBeforeMount | 模板编译完成，但还没有挂载到页面中 |
| mounted | onMounted | 把编译好的模板挂载到页面容器中显示，此周期用的较多 |
| beforeUpdate | onBeforeUpdate | 把data渲染到界面之前执行 |
| updated | onUpdated | 把data数据更新到UI完成后 |
| beforeDestroy | onBeforeUnmount | 销毁实例之前执行 |
| destroyed | onUnmounted | 销毁实例完成后执行 |
| activated | onActivated | 被 keep-alive 缓存激活时调用 |
| deactivated | onDeactivated | 被 keep-alive 缓存睡眠时调用 |
| rorCaptured | onErrorCaptured | 捕获子孙组件的错误时被调用此钩子包含三个参数：错误对象、组件实例、一个包含错误来源信息的字符串。可以返回 false 以阻止该错误继续向上传播。 |
在创建阶段，Vue 3 新增了 setup() 函数，用于替代 Vue 2 的 beforeCreate 和 created 钩子函数。setup() 函数是一个函数，可以接收 props、context 和 next 函数作为参数，并返回一个对象或一个 Promise 对象。在 setup() 函数中，我们可以直接访问组件的实例属性和方法，以及通过 next() 函数来访问父组件中的属性和方法。
在更新阶段，Vue 3 新增了 onRenderTracked 和 onRenderTriggered 钩子函数。onRenderTracked 钩子函数会在组件的渲染跟踪列表中触发，可以用于优化渲染性能。onRenderTriggered 钩子函数会在组件的渲染触发器列表中触发，可以用于执行副作用操作。
除了新增的生命周期钩子函数之外，Vue 3 还对一些生命周期钩子函数进行了改进和优化。例如，beforeMount 和 mounted 钩子函数合并为了一个 mounted 钩子函数；beforeUpdate 和 updated 钩子函数合并为了一个 updated 钩子函数。这些改进和优化使得 Vue 3 的生命周期更加简洁和易于使用。
总之，Vue 3 与 Vue 2 的生命周期相比，主要区别在于创建阶段的 setup() 函数和更新阶段的 onRenderTracked 和 onRenderTriggered 钩子函数。这些新增和改进的生命周期钩子函数使得 Vue 3 的开发更加高效和便捷。
三、Setup 组合式例子
<script setup> import { reactive, ref ,onMounted} from "vue"; //把编译好的模板挂载到页面容器中显示时执行 onMounted(()=>{ console.log('编译模板完成') }) </script>
需要注意的是，Vue 3 中引入了 setup 方法，将原来的 data、computed、watch、methods 等 API 整合到一起，使得组件的逻辑更加清晰和易于维护。同时，Vue 3 中还引入了 context 对象，使得组件内部可以更加方便地访问外部数据和 API。
四、根节点的区别
vue2中只能有一个根标签，但是在vue3中根组件已经可以有多个根节点了。
在vue2中只所以这么做是因为vdom是一颗单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点，组件也会转换为一个vdom,自然满足这个要求vue3中值所以可以有多个节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件有多个根，就创建一个Fragment节点，把多个根节点作为它的children,将来path的时候，如果发现是一个Fragement节点，则直接遍历children创建或更新。
五、双向数据绑定原理
Vue2使用ES5的Object.defineProperty() API对数据进行劫持，并结合发布订阅模式实现双向数据绑定。而Vue3则使用ES6的Proxy API对数据进行代理，从而进行双向数据绑定。使用Proxy API可以省去for in、闭包等内容来提升效率，同时可以监听整个对象，而不仅仅是某个属性。另外，Proxy API还可以检测到数组内部数据的变化，这是Object.defineProperty()无法实现的。
六、父子组件的生命周期顺序
- 加载渲染过程 ：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程:
父beforeUpdate->父updated
- 销毁过程:
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
