开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
一、vue3.0 生命周期
onBeforeMount(()=>{})组件挂载到节点上之前执行的函数
在挂载开始之前被调用：相关的
render函数首次被调用。
onMounted(()=>{})组件挂载完成后执行的函数
组件挂载时调用
onBeforeUpdate(()=>{})组件更新之前执行的函数
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
onUpdated(()=>{})组件更新完成之后执行的函数
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
onBeforeUnmount(()=>{})组件卸载之前执行的函数
在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onUnmounted(()=>{})组件卸载完成后执行的函数
卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onActivated(()=>{})被keep-alive缓存的组件激活时调用
被包含在 中的组件，会多出两个生命周期钩子函数，被激活时执行
onDeactivated(()=>{})被keep-alive缓存的组件停用时调用
比如从 A 组件，切换到 B 组件，A 组件消失时执行
onErrorCaptured(()=>{})当捕获一个来自子孙组件的异常时激活钩子函数
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
false以阻止该错误继续向上传播。
代码示例打印函数执行
<template>
<div class="cr-list">{{ sum }}</div>
<button @click="sum += 1">加加</button>
</template>
<script lang="ts">
import {
onMounted,
onUnmounted,
ref,
onBeforeMount,
onBeforeUpdate,
onBeforeUnmount,
onUpdated,
onActivated,
onDeactivated,
onErrorCaptured,
} from 'vue';
export default {
name: 'crTable',
// 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
setup() {
let sum = ref(0);
console.log('setup', 'vue3');
// vue3 生命周期钩子函数
// 组件挂载到节点上之前执行的函数
onBeforeMount(() => {
console.log('onBeforeMount', 'vue3');
});
// 组件挂载完成后执行的函数
onMounted(() => {
console.log('onMounted', 'vue3');
});
// 组件更新之前执行的函数
onBeforeUpdate(() => {
console.log('onBeforeUpdate', 'vue3');
});
// 组件更新完成之后执行的函数
onUpdated(() => {
console.log('onUpdated', 'vue3');
});
// 组件卸载之前执行的函数
onBeforeUnmount(() => {
console.log('onBeforeUnmount', 'vue3');
});
// 组件卸载完成后执行的函数
onUnmounted(() => {
console.log('onUnmounted', 'vue3');
});
// 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
onActivated(() => {
console.log('onActivated', 'vue3');
});
// 比如从 A 组件，切换到 B 组件，A 组件消失时执行
onDeactivated(() => {
console.log('onDeactivated', 'vue3');
});
// 当捕获一个来自子孙组件的异常时激活钩子函数
onErrorCaptured(() => {
console.log('onErrorCaptured', 'vue3');
});
return {
sum,
};
},
// vue2 生命周期钩子函数
beforeCreate() {
console.log('beforeCreate', 'vue2');
},
created() {
console.log('created', 'vue2');
},
beforeMount() {
console.log('beforeMount', 'vue2');
},
mounted() {
console.log('mounted', 'vue2');
},
beforeUpdate() {
console.log('beforeUpdate', 'vue2');
},
updated() {
console.log('updated', 'vue2');
},
beforeUnmount() {
console.log('beforeDestroy', 'vue2');
},
unmounted() {
console.log('unmounted', 'vue2');
},
activated() {
console.log('activated', 'vue2');
},
deactivated() {
console.log('deactivated', 'vue2');
},
errorCaptured() {
console.log('errorCaptured', 'vue2');
},
};
</script>
<style lang="scss">
@import '@/assets/scss/variables.scss';
</style>
二、vue2.0 -> vue3.0 生命周期
- beforeCreate(){} -> 使用 setup()
- created(){} -> 使用 setup()
- beforeMount(){} -> 引入 onBeforeMount(()=>{})
- mounted(){} -> 引入 onMounted(()=>{})
- beforeUpdate(){} -> 引入 onBeforeUpdate(()=>{})
- updated(){} -> 引入 onUpdated(()=>{})
- beforeDestroy(){} -> 引入 onBeforeUnmount(()=>{})
- destroyed(){} -> 引入 onUnmounted(()=>{})
- errorCaptured(){} -> 引入 onErrorCaptured(()=>{})
