VUE3的生命周期钩子 - 最全!!!
**稀有的 onRenderTracked onRenderTriggered **
<template>
<button
v-for="(item ,i) in girls" :key="i"
@click="selgirlsFunction(i)"
>{{i+1}}:{{item}}</button>
<div>
选择【{{selGirls}}】为你服务
</div>
</template>
import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,onErrorCaptured,onRenderTracked,onRenderTriggered} from 'vue';
<script lang="ts">
// setup是在 beforceCreate created 之前执行
interface DataProps{
girls:string[],
selGirls:string,
selgirlsFunction:(i:number)=> void
}
export default {
name: 'App',
setup() {
console.log('1-开始创建组件执行 ---- setuo'); //代替了beforceCreate created
const data:DataProps=reactive({
girls:['大脚','小脚','高的'],
selGirls:'',
selgirlsFunction:(i: number)=>{
data.selGirls=data.girls[i]
}
})
onBeforeMount(()=>{
console.log('2- 挂在到页面之前执行 --- onBeforeMount');
})
onMounted(()=>{
console.log('3- 组件挂在完毕执行 --- onMounted');
})
onBeforeUpdate(()=>{
console.log('4- 组件更新前执行 --- onMounted');
})
onUpdated(()=>{
console.log('5- 组件更新后执行 --- onUpdated');
})
onBeforeUnmount(()=>{
console.log('6- 组件卸载前执行 --- onBeforeUnmount');
})
onUnmounted(()=>{
console.log('7- 组件卸载后执行 --- onUnmounted');
})
onActivated(()=>{
console.log('使用keep-alive 激活时时执行的');
})
onDeactivated(()=>{
console.log('使用keep-alive 组件消失时候执行的');
})
onErrorCaptured(()=>{
console.log('捕获子组件异常的时候执行');
})
// vue3新加的 用来调试,超级方便
onRenderTracked((event)=>{
console.log('状态改变跟中钩子函数--->',event);
})
onRenderTriggered((event)=>{
//event返回当前点击数据的变化
console.log('状态针对性跟中钩子函数--->',event);
})
const refData=toRefs(data)
return{
...refData
}
},
}
</script>