生命周期

概述

Vue组件实例在创建时要经历一系列的初始化步骤, 在此过程中Vue会在合适的时机, 调用特定的函数, 从而让开发者有机会在特定阶段运行自己的代码

这些特定的函数统称为: 生命周期钩子

规律

生命周期整体分为四个阶段, 分别是: 创建、挂载、更新、销毁, 每个阶段都有一前一后两个钩子

Vue2 的生命周期

• 创建阶段: beforeCreate、created
• 挂载阶段: beforeMount、mounted
• 更新阶段: beforeUpdate、updated
• 销毁阶段: beforeDestroy、destroyed

Vue3 的生命周期

• 创建阶段: setup
• 挂载阶段: onBeforeMount、onMounted
• 更新阶段: onBeforeUpdate、onUpdated
• 卸载阶段: onBeforeUnmount、onUnmounted

常用的钩子: onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

使用

• 代码示例

<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
  
<!-- vue3写法 -->
<script lang="ts" setup name="Person">
  import {
    ref,
    onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
  } from 'vue'

  // 数据
  let sum = ref(0)

  // 方法
  function changeSum() {
    sum.value += 1
  }

  console.log('setup')

  // 生命周期钩子
  onBeforeMount(() => {
    console.log('挂载之前')
  })
  onMounted(() => {
    console.log('挂载完毕')
  })
  onBeforeUpdate(() => {
    console.log('更新之前')
  })
  onUpdated(() => {
    console.log('更新完毕')
  })
  onBeforeUnmount(() => {
    console.log('卸载之前')
  })
  onUnmounted(() => {
    console.log('卸载完毕')
  })
</script>