生命周期

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

生命周期钩子

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

官方示意图：

生命周期钩子函数

<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

通过这样对比，

1. 可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。
2. BeforeDestroy 变成了 onBeforeUnmount
3. destroyed 变成了 onUnmounted

尤大的介绍是 mount 比 Destroy 更形象，也和 beforeMount 相对应。

onServerPrefetch() (ssr) 在组件实例在服务器上被渲染之前调用