生命周期

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>