【框架类】—Vue3的生命周期

一、生命周期的相关函数

onBeforeMount 页面渲染之前和 onMounted渲染之后示例

<template><div class="test"><div ref="el">组件初始化</div></div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onMounted} from 'vue'
export default {name:'about',setup(){const el = ref(null)// 组件(DOM节点渲染)挂载之前调用, 响应式数据已经设置完毕onBeforeMount(()=> {console.log('组件挂载之前调用', el.value)})// DOM节点加载完成执行onMounted(()=> {console.log('DOM节点加载完成执行', el.value)})return {el}}
}
</script>
<style></style>

在这里插入图片描述

onBeforeUpdate DOM视图更新之前和 onUpdated DOM视图更新完成后

<template><div class="test"><button id="count" @click="count++"> 组件更新{{ count }}</button>></div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeUpdate, onUpdated} from 'vue'
export default {name:'about',setup(){const count = ref(0)// DOM视图更新之前调用onBeforeUpdate(()=> {console.log('DOM视图更新之前调用')})// DOM视图更新完成后调用onUpdated(()=> {// 文本内容应该与当前的 `count.value` 一致console.log('DOM视图更新完成后调用', document.getElementById('count').textContent)})return {count}}
}
</script>
<style></style>

在这里插入图片描述

onErrorCaptured 子孙组件的错误时调用
父组件

<template><div class="test"><test1 ref="test1"></test1></div>
</template>
<script>
//按需引入所需方法
import { ref, onErrorCaptured} from 'vue'
import test1 from './test1.vue'
export default {name:'about',components: {test1},setup(){// 当捕获一个来自子孙组件的错误时被调用onErrorCaptured(()=> {console.log('当捕获一个来自子孙组件的错误时被调用')})return {}}
}
</script>
<style></style>

子组件

<template><div class="">测试</div>
</template><script>
export default {setup () {// 因为test没有声明，test一定会报错console.log('test', test)}
}
</script><style></style>

在这里插入图片描述
3-1 子孙组件错误触发的来源列表

4. onBeforeUnmount 组件卸载前和 onUnmounted 组件卸载后

<template><div class="test"><button @click="jumpRoute">跳转路由</button></div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeUnmount, onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
export default {name:'about',setup(){const router = useRouter()function jumpRoute () {router.push({ name: 'promotionApply', query: {name: '张三'} })}// 组件卸载之前调用 ，路由跳转前触发onBeforeUnmount(()=> {console.log('组件卸载前')})// 组件实例被卸载之后调用，路由跳转前触发onUnmounted(() => {// 常用于手动清除副作用，计时器、DOM事件监听器或者与服务器的连接console.log('组件卸载后')})return {jumpRoute}}
}
</script>
<style></style>

在这里插入图片描述
5. onRenderTracked 仅在开发模式下可用, 组件渲染过程中，追踪到响应式依赖时调用

<template><div class="test"><div ref="el">组件初始化</div><button id="count" @click="count++"> 组件更新{{ count }}</button>></div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onRenderTracked,onMounted} from 'vue'
export default {name:'about',setup(){const el = ref(null)const count = ref(0)// 组件挂载之前调用, 响应式数据已经设置完毕onBeforeMount(()=> {console.log('组件挂载之前调用', el.value)})// 仅在开发模式下可用, 组件渲染过程中，追踪到响应式依赖时调用onRenderTracked(()=> {console.log('仅在开发模式下可用, 组件渲染过程中，追踪到响应式依赖时调用')})// DOM节点节点加载完成onMounted(()=> {console.log('DOM节点节点加载完成', el.value)})return {count,el}}
}
</script>
<style></style>

在这里插入图片描述
6. onRenderTriggered 仅在开发模式下可用, 组件渲染过程中，响应式数据触发更新时调用

<template><div class="test"><div ref="el">组件初始化</div><button id="count" @click="count++"> 组件更新{{ count }}</button>></div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onRenderTracked,onMounted} from 'vue'
export default {name:'about',setup(){const el = ref(null)const count = ref(0)// 组件挂载之前调用, 响应式数据已经设置完毕onBeforeMount(()=> {console.log('组件挂载之前调用', el.value)setTimeout(() => {count.value = 100}, 0);})// 仅在开发模式下可用, 组件渲染过程中，追踪到响应式依赖时调用onRenderTracked(()=> {console.log('仅在开发模式下可用, 组件渲染过程中，追踪到响应式依赖时调用')})// DOM节点节点加载完成onMounted(()=> {console.log('DOM节点加载完成', el.value, count.value)})// 仅在开发模式下可用, 组件渲染过程中，响应式数据触发更新时调用onRenderTriggered(()=> {console.log('仅在开发模式下可用,组件渲染过程中, 响应式数据触发更新时调用', count.value)})// DOM视图更新之前调用onBeforeUpdate(()=> {console.log('DOM视图更新之前调用')})// DOM视图更新完成后调用onUpdated(()=> {// 文本内容应该与当前的 `count.value` 一致console.log('DOM视图更新完成后调用', document.getElementById('count').textContent)})return {count,el}}
}
</script>
<style></style>