vue3生命周期（父子执行顺序）及其他钩子函数

发飙的狗头人

已于 2024-04-26 00:55:42 修改

阅读量6k

点赞数 39

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2024-04-26 00:52:41 首次发布

本文链接：https://blog.csdn.net/weixin_50961467/article/details/138199312

版权

vue3 专栏收录该内容

8 篇文章

订阅专栏

keepalive: onActivated、 onDeactivated

生命周期

1、setup : 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method

2、onBeforeMount() : 组件挂载到节点上之前执行的函数；

3、onMounted() : 组件挂载完成后执行的函数；

4、onBeforeUpdate(): 组件更新之前执行的函数；

5、onUpdated(): 组件更新完成之后执行的函数；

6、onBeforeUnmount(): 组件卸载之前执行的函数；

7、onUnmounted(): 组件卸载完成后执行的函数；

Vue2.X和Vue3.X对比

vue2 -------> vue3

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

总结： Vue2和Vue3钩子变化不大，beforeCreate 、created 两个钩子被setup来替代

下面vue2的执行顺序（vue3也是一样的顺序，只不过前面两个生命周期变成setup）

父子组件嵌套生命周期执行顺序

1.初始化与挂载生命周期的顺序

父组件beforeCreate => 父组件created => 父组件beforeMount =>

子组件beforeCreate => 子组件created => 子组件beforeMount =>

子组件mounted => 父组件mounted

父组件的生命周期到虚拟DOM挂载后开始执行子组件的生命周期，最后在执行父组件的真实DOM挂载

2.父子组件更新前后生命周期的顺序

父组件beforeUpdate => 子组件beforeUpdate =>子组件updated => 父组件updated

为了保证父组件的视图与子组件的数据同步，Vue 在子组件数据变化后先触发父组件的生命周期钩子函数，然后再更新子组件的视图

3.父子组件销毁前后生命周期的顺序

父组件beforeDestroy => 子组件beforeDestroy =>子组件destroyed => 父组件destroyed

当子组件全部销毁完成后，才会开始销毁父组件。这是为了确保子组件中的任何相关的依赖和引用在销毁父组件时不会出现问题。

nextTick

nextTick必须放在修改一个响应式数据之后，才会在onUpdated之后被调用，如果nextTick是放在所有对响应式数据修改之前，则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。


<template>
  <div>{{ car }}</div>
  <button @click="changeCar">改变car</button>
</template>

<script setup lang="ts">
// ---------点击按钮打印顺序 onUpdated  nextTick  nextTick2
import { ref, nextTick, onUpdated } from 'vue'
let car: any = ref('自行车')

const changeCar = () => {
  new Promise((res) => {
    res(car.value + '1')
  }).then((res) => {
    car.value = res
    // 放在这里才能拿到更新后的dom
    nextTick(() => {
      console.log('nextTick2')
    })
  })
  // 放在这里拿不到更新后的dom
  nextTick(() => {
    console.log('nextTick')
  })
}

onUpdated(() => {
  console.log('onUpdated')
})
</script>