Vue 3与Vue 2生命周期对比：新特性解析与差异探讨

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等，但还没有开始编译模板
beforeMount	onBeforeMount	模板编译完成，但还没有挂载到页面中
mounted	onMounted	把编译好的模板挂载到页面容器中显示，此周期用的较多
beforeUpdate	onBeforeUpdate	把data渲染到界面之前执行
updated	onUpdated	把data数据更新到UI完成后
beforeDestroy	onBeforeUnmount	销毁实例之前执行
destroyed	onUnmounted	销毁实例完成后执行
activated	onActivated	被 keep-alive 缓存激活时调用
deactivated	onDeactivated	被 keep-alive 缓存睡眠时调用
errorCaptured	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()无法实现的。