vue3基础入门系列--④生命周期

生命周期

官方生命周期映射关系 👇

vue2(选项式 API)	vue3(组合式 API)
beforeCreate	use setup()
created	use setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

在组合式 API 中,取消了beforeCreate,created两个钩子,选项式API中的周期钩子在使用之前都需要在setUp()中先引用,名字与以前相比增加了前缀on,除了beforeDestroy,destroyed两个周期名字发生了变化.

用一个demo来看看执行顺序.先在父组件中引入子组件,并在父组件控制子组件的创建与销毁,之后我们把所有生命周期写在组件中观察

<!-- 父组件 -->
<template>
  <Children v-if="state"></Children>
  <hr>
  <p>父组件</p>
  <!-- 控制子组件创建销毁 -->
  <button @click="change">销毁/创建组件</button>
</template>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件</p>
    <hr>
    <h2 ref="h">{{str}}</h2>
    <button @click="change">修改数据</button>
  </div>
</template>

<script setup>
//同样先引入,如何自动引入见第一期配置
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
const h = ref()
const str = ref('原始数据')
const change = () => {
  str.value = '我被修改了'
}
console.log('setup=======>');
onBeforeMount(() => {
  console.log('onBeforeMount=======>', h.value);
})
onMounted(() => {
  console.log('onMounted=======>', h.value);
})
onBeforeUpdate(() => {
  //这里打印的是dom中文本值,也就是h2标签的内容
  console.log('onBeforeUpdate=======>', h.value.innerHTML);
})
onUpdated(() => {
  //这里打印的是dom中文本值,也就是h2标签的内容
  console.log('onUpdated=======>', h.value.innerHTML);
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount=======>','销毁前');
})
onUnmounted(() => {
  console.log('onUnmounted=======>','销毁完成');
})
</script>

①点击创建按钮,看到控制台输出了三行,分别是触发了setup中的打印,onBeforeMount,onMounted两个周期钩子.也就是说在setup中的代码,在组件创建时会自动自行并且优先级最高,约等于之前的beforeCreate,created,之后触发的onBeforeMount输出undefined,说明此时dom还没有挂载上.在之后的onMounted正确的输出了dom元素.这三个钩子的共同特点就是组件创建后自动触发.

②点击子组件中的修改数据按钮,控制台又多了两行输出,分别是onBeforeUpdate,onUpdated数据更新前和数据更新后,我们打印的是h2标签中的文本,虽然页面已经发生了变化,但是onBeforeUpdate输出的依然是旧dom的文本值,这两个周期钩子,会在数据变化引起dom变化时触发.

③再次点击创建按钮,此时执行的是销毁子组件.这事触发的就是销毁钩子onBeforeUnmount,onUnmounted

这里只介绍这个几个常用的钩子,与vue2相比没有太大变化,大致的执行顺序触发时机都在上述demo中都有体现.
更多详见官网:https://cn.vuejs.org/api/composition-api-lifecycle.html#ondeactivated