vue3-生命周期

小半 • 2024年2月7日下午2:51 • Vue • 阅读 379

生命周期

vue 组件实例都有自己的一个生命周期
从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件
生命周期简单说就是 vue 实例从创建到销毁的过程

生命周期钩子

在各个周期运行时，会执行钩子函数，让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子

官方示意图：

生命周期钩子函数

钩子函数	说明
beforeCreate	在实例初始化之后调用
created	实例已经创建完成之后调用
beforeMount	在挂载开始之前被调用
mounted	在组件挂载完成后执行
beforeUpdate	在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updated	在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

<script lang="ts" setup>
import {
  ref,
  reactive,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted
} from 'vue'

// setup 替代了 beforeCreate   setup

// reactive 创建响应式对象
let data = reactive({
  // 定义响应式数据
  count: 0
})

const clickMe = () => {
  data.count++
  alert('hi')
}

console.log('1-开始创建组件-----setup()')

onBeforeMount(() => {
  console.log('2-组件挂载到页面之前执行-----onBeforeMount()')
})

onMounted(() => {
  console.log('3-组件挂载到页面之后执行-----onMounted()')
})
onBeforeUpdate(() => {
  console.log('4-组件更新之前-----onBeforeUpdate()')
})

onUpdated(() => {
  console.log('5-组件更新之后-----onUpdated()')
})

onBeforeUnmount(() => {
  console.log('6-组件卸载之前-----onBeforeUnmount()')
})
onUnmounted(() => {
  console.log('7-组件卸载之后-----onUnmounted()')
})
</script>

<template>
  <div class="container">
    <p>数字为{{ data.count }}</p>
    <button @click="clickMe">修改数据</button>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

VUE3 与 VUE2 生命周期的对比

setup 方式

  vue2            vue3
  
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

通过这样对比，