生命周期
main.vue
<template>
<div @click="isShow">显隐</div>
<componentA v-if="!flag"></componentA>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
// 不需要注册,直接引入使用
import componentA from './componentA.vue'
let flag = ref(false)
const isShow = () => {
flag.value = !flag.value
}
</script>
<style scoped lang='scss'>
</style>
componentA
<template>
<div ref="div"></div>
<div>
{{ str }}
</div>
<button @click="update">修改</button>
</template>
<script setup lang='ts'>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } from 'vue'
// beforeCreate created 在setup语法中没有对应的生命周期,setup代替了这两个生命周期
console.log('setup');
let div = ref<HTMLDivElement>()
let str = ref('hello')
onBeforeMount(() => {
console.log('onBeforeMount', div.value) // 创建前读取不到dom,打印出来的是null
})
onMounted(() => {
console.log('onMounted', div.value) // 创建后能够读取dom,打印出来的是div元素
})
let update = () => {
div.value!.innerText = '修改后'
str.value = 'world'
}
onBeforeUpdate(() => {
console.log('onBeforeUpdate', div.value, str.value) // 响应式修改才触发,直接修改dom不会触发,打印出来是触发前的值
})
onUpdated(() => {
console.log('onUpdated', div.value, str.value) // 响应式修改才触发,直接修改dom不会触发,打印出来是触发前的值
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount') // 组件卸载前触发
})
onUnmounted(() => {
console.log('onUnmounted') // 组件卸载后触发
})
onRenderTracked(() => {
console.log('onRenderTracked') // 每次响应式get都会触发
})
onRenderTriggered(() => {
console.log('onRenderTriggered') // 每次响应式set都会触发
})
</script>
<style scoped lang='scss'>
</style>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步