回顾vue2.0生命周期
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
vue3.0生命周期
- setup 创建实例前
- onBeforeMount 挂载DOM前
- onMounted 挂载DOM后
- onBeforeUpdate 更新组件前
- onUpdated 更新组件后
- onBeforeUnmount 卸载销毁前
- onUnmounted 卸载销毁后
验证代码
<template>
<div id="app">
<div class="coment">123</div>
</div>
</template>
<script>
import { onBeforeMount, onMounted } from "vue";
export default {
setup() {
onBeforeMount(() => {
console.log("DOM渲染前", document.querySelector(".coment"));
});
onMounted(() => {
console.log("DOM渲染后1", document.querySelector(".coment"));
});
onMounted(() => {
console.log("DOM渲染后2", document.querySelector(".coment"));
});
},
};
</script>
总结
组合API的生命周期钩子有7个,可以多次使用同一个钩子,执行顺序和书写顺序相同。