vue3生命周期
2020-10-06 本文已影响0人
栗子daisy
- vue3 的钩子函数基本是再 vue2 的基础上加了一个on,但也有两个钩子函数发生了变化。BeforeDestroy变成了onBeforeUnmount，destroyed变成了onUnmounted（尤大神的介绍是mount比Destroy更形象，也和beforeMount相对应。）
- 除了这些钩子函数外，Vue3.x还增加了用来调试使用的onRenderTracked和onRenderTriggered函数。
- Vue3.x 生命周期在调用前需要先进行引入
import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue";
| Vue2 | vue3 | |
|---|---|---|
| beforeCreate | setup() | setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method |
| created | setup() | |
| beforeMount | onBeforeMount | 组件挂载到节点上之前执行的函数。 |
| mounted | onMounted | 组件挂载完成后执行的函数。 |
| beforeUpdate | onBeforeUpdate | 组件更新之前执行的函数。 |
| updated | onUpdated | 组件更新完成之后执行的函数。 |
| beforeDestroy | onBeforeUnmount | 组件卸载之前执行的函数。 |
| destroyed | onUnmounted | 组件卸载完成后执行的函数 |
| activated | onActivated | 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。 |
| deactivated | onDeactivated | 比如从 A 组件，切换到 B 组件，A 组件消失时执行。 |
| errorCaptured | onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数。 |
注：使用<keep-alive>组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用<keep-alive>组件解决。
-
vue3的钩子函数在对应的vue2钩子函数前执行。实际项目中只用一套。如果你使用 Vue3，请尽量使用新的生命周期钩子函数，也就是写在setup()函数中带on的这些钩子函数。
