Vue3的生命周期

25 阅读1分钟

Vue3的生命周期

生命周期的概念理解:vue实例从创建、挂载、更新到销毁这一整个过程叫做生命周期。

Vue3生命周期的类型

选项式API组合式API生命周期钩子(setup)
beforeCreateNot needed
createdNot needed
beforeMountonBeforeMount注册一个钩子,在组件被挂载之前被调用
mountedonMounted注册一个回调函数,在组件挂载完成后执行
beforeUpdateonBeforeUpdate注册一个钩子,在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updatedonUpdated注册一个回调函数,在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeUnmountonBeforeUnmount注册一个钩子,在组件实例被卸载之前调用
unmountedonUnmounted注册一个回调函数,在组件实例被卸载之后调用
  • 钩子:表示一个函数

  • 组合式API(即setup() 内部)调用的生命周期钩子里是没有beforeCreate 和 created函数的。

原因是:

setup选项在组件被创建之前执行,不需要使用this,this不会指向示例。beforeCreate 和 created能做的事情在 setup也能实现。

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的,所以不需要显式地定义它们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。 

Vue3生命周期执行示例

<template>
    <div class="count">
    <!-- 使用v-if来演示卸载页面元素 -->
    <div v-if="isShow"> 
      <el-tag :key="count">数量显示:{{ count }}</el-tag>
      <el-button type="primary" size="small" @click="count++">加 1</el-button>
    </div>
    <el-button type="danger" size="small" @click="isShow = false"
      >卸载</el-button
    >
  </div>
</template>

<script setup lang="ts">
import {ref,beforeCreate,created,onBeforeMount,onMounted,onBeforeUpdated,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';

const count = ref(0);
const isShow = ref(true);

beforeCreate(()=>{   //无调用
    console.log("beforeCreate");   
});
created(()=>{   //无调用
    console.log("created");   
});
onBeforeMount(()=>{  //进入页面时触发调用
    console.log("onBeforeMount开始调用");   
});
onMounted(()=>{   //进入页面时触发调用
    console.log("onMounted开始调用");
    
})
onBeforeUpdated(()=>{  //点击“加1”按钮时调用
    console.log("onBeforeUpdated开始调用");
    
})
onUpdated(() => {
  console.log("onUpdated 开始调用");  //点击“加1”按钮时调用
});

onBeforeUnmount(() => {
  console.log("onBeforeUnmount 开始调用");  //点击“卸载”按钮时触发
});

onUnmounted(() => {
  console.log("onUnmounted 开始调用");  //点击“卸载”按钮时触发
});
</script>

<style></style>