第五章 生命周期函数

vue2生命周期函数

• beforeCreate：实例Vue，未初始化和响应式数据
• created：已初始化和响应式数据，可访问数据、方法
• beforeMount：render调用，虚拟DOM生成，未转真实DOM
• mounted：真实DOM挂载完成
• beforeUpdate：数据更新，新虚拟DOM生成
• updated：新旧虚拟DOM进行对比，真实DOM更新
• beforeDestroy：实例销毁前，仍可访问数据
• destroy：实例销毁，子实例销毁，指令解绑，解绑本实例的事件
• activated：keep-alive所缓存组件激活时调用
• deactivated：keep-alive所缓存组件失活时调用
• errorCaptured：子孙组件的错误捕获，此函数可返回false阻止继续向上传播

动态组件与keep-alive

<!-- <keep-alive> 失活的组件将会被缓存！ --> 
<keep-alive>
    <!-- :is="组件名" --> 
    <component :is="compName"></component>
</keep-alive>

<keep-alive>属性：

• include string | RegExp | Array 名称匹配（组件中的name选项值）的组件会被缓存
• exclude string | RegExp | Array 名称匹配（组件中的name选项值）的组件不被缓存
• max 最多缓存组件数。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

component属性

• is=“全局注册或局部注册的组件名”

父子组件生命周期顺序？
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

vue2动态组件使用案例

vue3生命周期函数

setup下即为created环境

基本使用

<template>
  <div class="App">
    <h1 ref="h1Ref" v-if="isShow">{{ num }}</h1>
    <button @click="num++">+1</button>
    <button @click="isShow = !isShow">创建/销毁</button>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onUnmounted,
  onBeforeUnmount,
} from "vue";
let num = ref<number>(0);
const h1Ref = ref<HTMLHeadingElement>();
let isShow = ref<boolean>(true);

onBeforeMount(() => {
  console.log("onBeforeMount", h1Ref.value);
});

onMounted(() => {
  console.log("onMounted", h1Ref.value);
});

onBeforeUpdate(() => {
  console.log("onBeforeUpdate", h1Ref.value);
});

onUpdated(() => {
  console.log("onUpdated", h1Ref.value);
});

onBeforeUnmount(() => {
  console.log("onBeforeMount", h1Ref.value);
});

onUnmounted(() => {
  console.log("onUnmounted", h1Ref.value);
});
</script>

vue3动态组件使用
App.vue

<template>
  <div class="App">
    <button
      v-for="(item, index) in tabsTitle"
      :key="item"
      @click="handleClick(index)"
      :class="{ active: curIndex === index }"
    >
      {{ item }}
    </button>

    <keep-alive include="TestAName">
      <component :is="tabsContent[curIndex]"></component>
    </keep-alive>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import TestA from "./components/TestA.vue";
import TestB from "./components/TestB.vue";

let curIndex = ref(0);
const tabsTitle = ["tabA", "tabB"];
const tabsContent = [TestA,TestB]

function handleClick(index) {
  curIndex.value = index;
}
</script>

<style scoped>
.active {
  color: pink;
}
</style>

TestA.vue

<template>
  <div class="TestA">TestA</div>
  <button @click="numA++">{{ numA }}</button>
</template>

<script lang="ts">
  export default {
    name:'TestAName'
  }
</script>
<script setup lang="ts">
import { ref, onActivated, onDeactivated} from "vue";
let numA = ref(0)

// 激活的生命周期函数
onActivated(()=>{
  console.log('onActivated TestA');
})

// 失活的声明周期函数
onDeactivated(()=>{
  console.log('onDeactivated TestA');
})
</script>

TestB.vue

<template>
  <div class="TestB">TestB</div>
  <button @click="numB++">{{ numB }}</button>
</template>

<script setup lang="ts">
import { ref, onActivated, onDeactivated} from "vue";
let numB = ref(0)

onActivated(()=>{
  console.log('onActivated TestB');
})

onDeactivated(()=>{
  console.log('onDeactivated TestB');
})
</script>