Vue3+TypeScript学习笔记（七）

1. Vue有若干个生命周期钩子，即是一些预先定义好的回调函数，它们的作用是在组件实例的不同阶段执行不同的功能
2. Vue3中的生命周期钩子共有八个，分别是onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onRenderTracked、onRenderTriggered（在Vue2中还有beforeCreate和Created，但是Vue3中因为引入了setup组合式API所以删去了这两个函数）

3. 不同生命周期钩子的作用：

   1. 创建组件的钩子：

      • onBeforeMount：在组件实例创建完毕但还未挂载到真实DOM上时调用，此时模板中的依赖已经收集完毕但还不能通过ref访问真实DOM，可以修改一些依赖项
      • onMounted：在组件实例挂载到真实DOM上之后调用，此时可以通过ref访问到模板中的真实DOM元素，属于经常使用的生命周期钩子
      • ?为可选链操作符，作用是访问对象中的深层次属性时不必一步步判断前面的属性是否有效，即使出现null或undefined也不会报错

<template>
    <div ref="code">{{ str }}</div>
    <hr>
    <button @click="change">修改字符串</button>
</template>

<script setup lang="ts">
import {
    ref,
    onBeforeMount,
    onMounted,
} from 'vue'
let str = ref<string>('修改前的A组件中的字符串')
let code = ref<HTMLElement>()
// 创建组件的钩子
onBeforeMount(() => {
    console.log('创建之前=====>',code.value?.innerHTML)    // undefined
})
onMounted(() => {
    console.log('创建完成=====>',code.value?.innerHTML)    // <div>修改前的A组件中的字符串</div>
})
</script>

1. 更新组件的钩子：

   • onBeforeUpdate：在依赖更新之前触发，此时可以通过ref访问到真实DOM但组件中的数据是旧的，可在此发送Ajax请求让服务器存储旧数据
   • onUpdated：在依赖更新之后触发，此时组件中的数据更新完毕并可以通过ref访问

<template>
  <div ref="code">{{ str }}</div>
  <hr>
    <button @click="change">修改字符串</button>
  </template>
<script setup lang="ts">
  import {
    ref,
    onBeforeUpdate,
    onUpdated,
  } from 'vue'
  let str = ref<string>('修改前的A组件中的字符串')
  let code = ref<HTMLElement>()
    // 更新组件的钩子
  onBeforeUpdate(() => {
    console.log('更新之前=====>',code.value?.innerHTML)
  })
  onUpdated(() => {
    console.log('更新完成=====>',code.value?.innerHTML)
  })
  const change = () => {
    str.value = '修改后的A组件中的字符串'
  }
</script>

1. 销毁组件的钩子：

   • onBeforeUnmount：在组件实例即将被销毁时触发，此时组件实例对应的真实DOM仍然存在
   • onUnmounted：在组件实例被销毁后触发，此时组件实例对应的真实DOM已经被销毁，无法访问
   • 特别注意：组件不能自己销毁自己，可以借助父组件改变v-if销毁

<template>
    <A v-if="unm"></A>
    <button @click="unmount">创建/销毁组件</button>
</template>

<script setup lang="ts">
import A from './components/A.vue'
import {
    ref,
} from 'vue'
let unm = ref<Boolean>(true)
// Vue3 setup语法糖中没有beforeCreate和Created这两个声明周期钩子,用setup代替
const unmount = () => {
    unm.value = !unm.value
}
</script>

<template v-if="ddd">
    <div ref="code">{{ str }}</div>
    <hr>
    <button @click="change">修改字符串</button>
</template>
<script setup lang="ts">
import {
    ref,
    onBeforeUnmount,
    onUnmounted,
} from 'vue'
let str = ref<string>('修改前的A组件中的字符串')
let code = ref<HTMLElement>()
// 销毁组件的钩子
onBeforeUnmount(() => {
    console.log('销毁之前=====>',code.value)    //<div>修改前的A组件中的字符串</div>
})
onUnmounted(() => {
    console.log('销毁完成=====>')    // null
})
</script>

1. 调试组件的钩子：

   • onRenderTracked：在组件实例收集完依赖后调用，接收一个参数e，返回effect对象和其他一些属性，包含组件的依赖和状态信息
   • onRenderTriggered：在组件实例中的依赖改变时调用，接收一个参数e，返回内容和onRenderTracked相同，但数据都是最新的

<template v-if="ddd">
    <div ref="code">{{ str }}</div>
    <hr>
    <button @click="change">修改字符串</button>
</template>
<script setup lang="ts">
import {
    ref,
    reactive,
    onRenderTracked,
    onRenderTriggered,
} from 'vue'
let str = ref<string>('修改前的A组件中的字符串')
let code = ref<HTMLElement>()
// 调试组件时使用,可以查看组件中的各项依赖和状态
onRenderTracked((e)=>{    // 在组件被挂载到页面上时调用
    console.log(e)
})
onRenderTriggered((e)=>{    // 在组件中的依赖发生改变时使用
    console.log(e)
})
</script>