25.vue3学习篇-生命周期和新特性

一、生命周期

在 Vue 3 中，生命周期钩子与 Vue 2 相比有一些变化，同时也引入了一些新的钩子。以下是 Vue 2 和 Vue 3 生命周期的对比：

1.Vue 2 生命周期钩子

1.beforeCreate:

在实例初始化之后，数据观测和事件配置之前被调用。

2.created:

在实例创建完成后被立即调用。此时，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3.beforeMount:

在挂载开始之前被调用。相关的 render 函数首次被调用

4.mounted:

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

5.beforeUpdate:

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6.updated:

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7.beforeDestroy:

在实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed:

在实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2.Vue 3 生命周期钩子

1.setup()：

在组件创建之前被调用，是组合式 API 的入口点。它接收两个参数：props 和 context。在这个阶段，组件实例还未创建，因此无法访问 this。这个钩子函数可以返回一个对象，该对象的属性和方法可以在模板和其他组合式 API 函数中使用。

2.onBeforeMount：

在组件挂载到 DOM 之前调用。

3.onMounted：

在组件挂载到 DOM 后调用。

4.onBeforeUpdate：

在响应式数据更新导致虚拟 DOM 重新渲染之前调用。

5.onUpdated：

在响应式数据更新导致虚拟 DOM 重新渲染并更新到 DOM 之后调用。

6.onBeforeUnmount：

在组件卸载之前调用。

7.onUnmounted：

在组件卸载后调用。

8.onActivated：

仅在使用 <keep-alive> 包裹组件时有效）：在组件被激活时调用。

9.onDeactivated

（仅在使用 <keep-alive> 包裹组件时有效）：在组件被停用时调用。

10.onErrorCaptured

（错误处理钩子）：在捕获到来自子孙组件的错误时被调用。

二、新特性

相比 Vue 2，Vue 3 有很多新特性，以下是一些主要的方面：

1.性能提升

编译优化

• 静态提升：Vue 3 将静态的节点提升到渲染函数之外，避免在每次渲染时重复创建，从而提高性能。
• 补丁算法优化：Vue 3 的虚拟 DOM 补丁算法更加高效，减少了不必要的 DOM 操作。

体积更小

• Vue 3 进行了摇树优化，可以去除未使用的功能代码，使得打包后的体积更小。

2.响应式系统改进

使用 ES2015 的 Proxy 代替 Object.defineProperty

• 更好地支持嵌套对象和数组的响应式，无需手动深层遍历。
• 可以直接监听对象属性的添加和删除。

更加灵活的响应式 API

• reactive和ref函数：用于创建响应式数据，更加清晰和灵活地管理响应式状态。

3.组合式api（Composition API）

更好的逻辑复用

• 可以将相关的逻辑封装在函数中，通过组合的方式在不同的组件中复用，提高代码的可维护性和可测试性。
• 避免了 Vue 2 中 mixins 带来的命名冲突和数据来源不清晰的问题。

更好的类型推导

• 在使用 TypeScript 时，组合式 API 可以提供更好的类型推导，提高开发效率。

4.Teleport（传送门）

允许将一个组件的模板内容渲染到 DOM 中的任意位置，而不是仅仅局限于组件自身的位置。这对于创建模态框、通知等需要脱离组件层级结构进行渲染的元素非常有用。

5.Fragments（片段）

在 Vue 3 中，组件可以返回多个根节点，而不需要使用额外的包裹元素。这使得模板更加灵活，减少了不必要的 DOM 层级。

6.Suspense（异步组件加载）

更好地处理异步组件的加载状态，可以在等待异步组件加载时显示一个加载指示器，提高用户体验。

7.更好的Typescript支持

Vue 3 本身是使用 TypeScript 编写的，并且提供了更好的类型定义和类型推导，使得在使用 TypeScript 开发 Vue 应用时更加方便和可靠。

除了前面提到的性能提升、响应式系统改进、组合式 API、Teleport、Fragments、Suspense 和更好的 TypeScript 支持等，以下是一些其他新特性：

1.新的调试工具

Vue 3 提供了更强大的开发工具支持，包括更好的组件层级展示、响应式数据追踪等功能，方便开发者进行调试。

2.renderTracked和renderTriggered调试钩子

1.renderTracked：在每次渲染过程中，当 Vue 跟踪到响应式依赖时被调用。它提供了有关哪些响应式属性被追踪以及在哪个组件中被追踪的信息。这对于调试性能问题和理解组件的渲染逻辑非常有用。

参数包括一个 debuggerEvent 对象，其中包含以下属性：

• key：被追踪的响应式属性的键名。
• target：被追踪的响应式对象。
• type：操作类型，通常是 "get"。
• oldValue：旧值（如果有）。
• newValue：新值（如果有）。

2.renderTriggered：在每次渲染过程中，当响应式依赖发生变化导致组件重新渲染时被调用。它提供了有关哪些响应式属性触发了重新渲染以及在哪个组件中触发的信息。

• 参数也包括一个 debuggerEvent 对象，属性与 renderTracked 类似，但 type 通常是 "set" 或其他修改操作类型。

3.自定义渲染器 API

Vue 3 允许开发者创建自定义渲染器，以适应不同的平台和环境。这使得 Vue 可以在更多的场景下使用，例如原生移动应用开发、服务器端渲染等。

4.更灵活的模板语法

Vue 3 的模板语法更加灵活，支持更多的表达式和函数调用。同时，模板编译也更加高效，减少了编译时间和体积。

5.更好的 Tree-shaking 支持

Vue 3 的模块结构更加清晰，使得 Tree-shaking 更加有效。这意味着在打包应用时，可以只包含实际使用的功能模块，从而减小应用的体积。