vue3.0 生命周期 式列描述

小呀么小菜鸡
106 阅读4分钟

一、实列描述

根据打印结果查看打印顺序

1. 父组件【crTable.vue】
<template>
  <div>
    <span v-for="(item, index) in tabs" :key="index" @click="sum = item">{{ item }}</span>
  </div>
  <keep-alive>
    <tabOne v-if="sum === 'tabOne'" />
  </keep-alive>
  <keep-alive>
    <tabTwo v-if="sum === 'tabTwo'" />
  </keep-alive>
</template>
<script lang="ts">
import { onMounted, onUnmounted, ref, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onUpdated, onErrorCaptured } from 'vue';
import tabOne from './tabOne.vue';
import tabTwo from './tabTwo.vue';
export default {
  name: 'crTable',
  components: {
    tabOne,
    tabTwo,
  },
  // 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
  setup() {
    let sum = ref('tabOne');
    let tabs = ref(['tabOne', 'tabTwo']);
    console.log('setup', 'vue3');
    // vue3 生命周期钩子函数
    // 组件挂载到节点上之前执行的函数
    onBeforeMount(() => {
      console.log('onBeforeMount', 'vue3');
    });
    // 组件挂载完成后执行的函数
    onMounted(() => {
      console.log('onMounted', 'vue3');
    });
    // 组件更新之前执行的函数
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate', 'vue3');
    });
    // 组件更新完成之后执行的函数
    onUpdated(() => {
      console.log('onUpdated', 'vue3');
    });
    // 组件卸载之前执行的函数
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount', 'vue3');
    });
    // 组件卸载完成后执行的函数
    onUnmounted(() => {
      console.log('onUnmounted', 'vue3');
    });
    // 当捕获一个来自子孙组件的异常时激活钩子函数
    onErrorCaptured(() => {
      console.log('onErrorCaptured', 'vue3');
    });
    return {
      sum,
      tabs,
    };
  },
};
</script>
<style lang="scss">
</style>

进入页面执行顺序【tabOne与tabTwo是子组件】默认tabOne组件

  1. crTable.vue setup vue3
  2. crTable.vue onBeforeMount vue3
  3. tabOne.vue setup tabOne vue3
  4. tabOne.vue onBeforeMount tabOne vue3
  5. tabOne.vue onMounted tabOne vue3
  6. tabOne.vue onActivated tabOne vue3 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
  7. crTable.vue onMounted vue3

点击切换执行顺序

  1. crTable.vue onBeforeUpdate vue3
  2. tabTwo.vue setup tabTwo vue3
  3. tabTwo.vue onBeforeMount tabTwo vue3
  4. tabOne.vue onDeactivated tabOne vue3 组件消失时执行
  5. tabTwo.vue onMounted tabTwo vue3
  6. tabTwo.vue onActivated tabTwo vue3 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
  7. crTable.vue onUpdated vue3
2. 子组件

tabOne组件

onActivated(()=>{}) 与 onDeactivated(()=>{})切换组件时执行的顺序

修改 sum 值内部的执行顺序

  1. tabOne.vue onBeforeUpdate tabOne vue3
  2. tabOne.vue onUpdated tabOne vue3
<template>
  <div class="cr-list">{{ sum }}</div>
  <button @click="sum -= 1">减减</button>
</template>
<script lang="ts">
import { onMounted, onUnmounted, ref, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onUpdated, onActivated, onDeactivated } from 'vue';
export default {
  name: 'crTable',
  // 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
  setup() {
    let sum = ref(0);
    console.log('setup', 'tabOne', 'vue3');
    // vue3 生命周期钩子函数
    // 组件挂载到节点上之前执行的函数
    onBeforeMount(() => {
      console.log('onBeforeMount', 'tabOne', 'vue3');
    });
    // 组件挂载完成后执行的函数
    onMounted(() => {
      console.log('onMounted', 'tabOne', 'vue3');
    });
    // 组件更新之前执行的函数
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate', 'tabOne', 'vue3');
    });
    // 组件更新完成之后执行的函数
    onUpdated(() => {
      console.log('onUpdated', 'tabOne', 'vue3');
    });
    // 组件卸载之前执行的函数
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount', 'tabOne', 'vue3');
    });
    // 组件卸载完成后执行的函数
    onUnmounted(() => {
      console.log('onUnmounted', 'tabOne', 'vue3');
    });
    // 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
    onActivated(() => {
      console.log('onActivated', 'tabOne', 'vue3');
    });
    // 比如从 A 组件，切换到 B 组件，A 组件消失时执行
    onDeactivated(() => {
      console.log('onDeactivated', 'tabOne', 'vue3');
    });
    return {
      sum,
    };
  },
};
</script>
<style lang="scss">
</style>

tabTwo组件

onActivated(()=>{}) 与 onDeactivated(()=>{})切换组件时执行的顺序

修改 sum 值内部的执行顺序

  1. tabTwo.vue onBeforeUpdate tabTwo vue3
  2. tabTwo.vue onUpdated tabTwo vue3
<template>
  <div class="cr-list">{{ sum }}</div>
  <button @click="sum += 1">加加</button>
</template>
<script lang="ts">
import { onMounted, onUnmounted, ref, onBeforeMount, onBeforeUpdate, onBeforeUnmount, onUpdated, onActivated, onDeactivated } from 'vue';

export default {
  name: 'crTable',
  // 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
  setup() {
    let sum = ref(0);
    console.log('setup', 'tabTwo', 'vue3');
    // vue3 生命周期钩子函数
    // 组件挂载到节点上之前执行的函数
    onBeforeMount(() => {
      console.log('onBeforeMount', 'tabTwo', 'vue3');
    });
    // 组件挂载完成后执行的函数
    onMounted(() => {
      console.log('onMounted', 'tabTwo', 'vue3');
    });
    // 组件更新之前执行的函数
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate', 'tabTwo', 'vue3');
    });
    // 组件更新完成之后执行的函数
    onUpdated(() => {
      console.log('onUpdated', 'tabTwo', 'vue3');
    });
    // 组件卸载之前执行的函数
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount', 'tabTwo', 'vue3');
    });
    // 组件卸载完成后执行的函数
    onUnmounted(() => {
      console.log('onUnmounted', 'tabTwo', 'vue3');
    });
    // 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
    onActivated(() => {
      console.log('onActivated', 'tabTwo', 'vue3');
    });
    // 比如从 A 组件，切换到 B 组件，A 组件消失时执行
    onDeactivated(() => {
      console.log('onDeactivated', 'tabTwo', 'vue3');
    });
    return {
      sum,
    };
  },
};
</script>
<style lang="scss">
</style>

二、生命周期钩子函数描述 <keep-alive>包裹

其他钩子函数请看 vue3.0生命周期

  1. onActivated(()=>{})

被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数，组件被激活时执行【请看上文实例执行】

  1. onDeactivated(()=>{})

比如从 tabOne 组件，切换到 tabTwo 组件，tabOne 组件消失时执行 【请看上文实例执行】

  1. onErrorCaptured(()=>{})

捕获tabOne组件 和 tabTwo组件 的异常时激活钩子函数，此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。【当捕获一个来自子孙组件的异常时激活钩子函数】

avatar
文章
阅读
粉丝