vue3-生命周期

生命周期

生命周期

• vue 组件实例都有自己的一个生命周期

• 从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件

• 生命周期简单说就是 vue 实例从创建到销毁的过程

生命周期钩子

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

官方示意图：

生命周期钩子函数

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

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()')
})




.container {
}

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) 在组件实例在服务器上被渲染之前调用