第三十三节——组合式API生命周期

一、基本使用

组合式api生命周期几乎和选项式一致。注意组合式api是从挂载阶段开始

<template>
  <div>
 
  </div>
</template>
<script setup>
import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated, onBeforeUnmount, 
  onUnmounted,
} from 'vue'
 
/**
 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
 */
onBeforeMount(() => {
 
})
 
/**
 * 组件挂载时调用
 */
onMounted(() => {
 
})
 
/**
 *  数据更新时调用，发生在虚拟 DOM 打补丁之前。
 * 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
 */
onBeforeUpdate(() => {
 
})
 
/**
 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
 */
onUpdated(() => {
 
})
 
/**
 * 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的
 */
onBeforeUnmount(() => {
 
})
 
/**
 *  卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，
 * 所有事件侦听器都被移除，所有子组件实例被卸载
 */
onUnmounted(() => {
 
})
 
</script>

二、