跟小满老师学vue3 第十二章 生命周期 & 源码

vue2生命周期钩子，如图

 vue3生命周期钩子

 setup语法糖模式下vue生命周期钩子

App.vue代码

<template>
  <h1>生命周期</h1>
  <A v-if="flag"></A>
  <button @click="flag = !flag">创建-销毁</button>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import A from './components/A.vue'
const flag = ref<Boolean>(true)
</script>

子组件A.vue代码

<template>
  <h3>我是组件 好家伙</h3>
  <div ref="div">{{ str }}</div>
  <button @click="change">修改Str</button>
  <hr>
</template>

<script setup lang="ts">
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, onRenderTracked, onRenderTriggered} from 'vue'
// beforeCreate created setup语法糖模式是没有这两个生命周期钩子 setup 去代替
// onBeforeMount 读不到dom onMounted可以读取dom
// onBeforeUpdate 获取的是更新之前的dom onUpdated 获取更新之后dom
console.log('setup')
const str = ref<string>('小满')
const div = ref<HTMLDivElement>()
const change = () => {
  str.value = '我被改了'
}

// 创建
onBeforeMount(() => {
  console.log('创建之前========>',div.value)
})
onMounted(() => {
  console.log('创建完成========>',div.value)
})
// 更新的钩子
onBeforeUpdate(() => {
  console.log('更新组件之前========>',div.value?.innerText)
})

onUpdated(() => {
  console.log('更新组件完成========>',div.value?.innerText)
})
// 销毁
onBeforeUnmount(() => {
  console.log('销毁之前========>',div.value)
})
onUnmounted(() => {
  console.log('销毁完成========>')
})

onRenderTracked((e) => { //跟踪响应式数据状态，当页面未渲染前执行
  console.log(e)
})
onRenderTriggered((e) => { //修改响应式数据，当页面未更新前执行
  console.log(e)
})
</script>

运行结果