跳至主要內容

组件生命周期

刘春龙原创...大约 2 分钟WEB前端Vue3教程文档

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码

<template>
  	<div></div>
</template>

<script setup lang="ts">  //setup取代beforeCreate和created
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured, onRenderTracked, onRenderTriggered, onActivated, onDeactivated } from "vue";
onBeforeMount(() => {
  	//在挂载前被调用
})
onMounted(() => {
  	//挂载完成后调用
})
onBeforeUpdate(() => {
  	//数据更新时调用,发生在虚拟 DOM 打补丁之前。此时内存中的数据已经被修改,但还没有更新到页面上
})
onUpdated(() => {
  	//数据更新后调用,此时内存数据已经修改,页面数据也已经更新
})
onBeforeUnmount(() => {
  	//组件卸载前调用
})
onUnmounted(() => {
  	//卸载组件实例后调用
})
onErrorCaptured(() => {
  	//每当事件处理程序或生命周期钩子抛出错误时调用
})
onRenderTracked(() => {
  	//状态跟踪,vue3新引入的钩子函数,只有在开发环境有用,用于跟踪所有响应式变量和方法,一旦页面有update,就会跟踪他们并返回一个event对象
})
onRenderTriggered(() => {
  	//状态触发,同样是vue3新引入的钩子函数,只有在开发环境有效,与onRenderTracked的效果类似,但不会跟踪所有的响应式变量方法,只会追踪发生改变的数据,同样返回一个event对象
})
onActivated(() => {
  	//与keep-alive一起使用,当keep-alive包裹的组件激活时调用
})
onDeactivated(() => {
  	//与keep-alive一起使用,当keep-alive包裹的组件停用时调用
})
</script>

生命周期应用

组件的生命周期会随着我们对Vue的了解越多,也会越来越重要,这里我们先讲两个常用的应用常见:

  1. 通过ref获取元素DOM结构
  2. 模拟网络请求渲染数据

提示

获取元素DOM结构要在页面加载完成后进行

网络请求要在页面加载完成之前进行(onMounted或onMounted之前的生命周期)

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7