vue3中的父子组件生命周期执行顺序

2,942

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第15天,点击查看活动详情

在vue中生命周期可是至关重要,很多事需要在固定时候做出回应,而面试也是常问的问题

vue2与vue3的生命周期

vue2

  • beforeCreated 在数据加载之前
  • created 在数据加载之后
  • beforeMount 在view挂载前
  • mounted 在view挂载后
  • beforeUpdate 在数据更新前
  • update 在数据更新后
  • beforeDestory 组件销毁前
  • destoryed 组件销毁后

vue3

vue3中使用optionsApi,在setup中写入生命周期钩子,而beforeCreated,created就没法使用了,setup中写入的就相当于在beforeCreated,created生命周期钩子写入

  • onBeforeMount
  • onMounted
  • onBeforeUpdate
  • onUpdate
  • onBeforeUnmount
  • onMounted

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

父组件中

<template>
  <div>
    <home/>
  </div>
</template>
<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUnmounted} from "vue"
import Home from "./components/Home.vue"
export default {
  components:{
    Home
  },
  setup(){
    console.log("父createed");
    onBeforeMount(()=>{
      console.log("父onBeforeMount");
    })
    onMounted(()=>{
      console.log("父onMounted");
    })
    onBeforeUpdate(()=>{
      console.log("父onBeforeUpdate");
    })
    onUnmounted(()=>{
      console.log("父onUnmounted");
    })
  }
}
</script>
<style>
</style>

子组件中

<template>
  <div></div>
</template>
<script>
import {onBeforeMount,onMounted,onBeforeUpdate,onUnmounted} from "vue"
export default {
  setup(){
    console.log("子createed");
    onBeforeMount(()=>{
      console.log("子onBeforeMount");
    })
    onMounted(()=>{
      console.log("子onMounted");
    })
    onBeforeUpdate(()=>{
      console.log("子onBeforeUpdate");
    })
    onUnmounted(()=>{
      console.log("子onUnmounted");
    })
  }
}
</script>
<style>
</style>

在父子组件生命周期中分别打印一段数字,判断一下谁先执行

执行顺序.png 我们可以看到

  • 加载父组件中的数据created,
  • 然后再去中执行父组件挂载前的onBeforeMount
  • 子组件中的数据加载
  • 子组件中的挂载dom
  • 再去父组件中挂载dom

也就是说vue是先挂载子组件在挂载父组件

数据更新肯定是谁更新加载谁

但是如果我们两个组件 都用同一个数据他会如何触发呢

我们在父组件定义一个变量,把他传给子组件,并且加个按钮设定方法修改它,看一看在父子组件update的执行顺序

父组件


<template>
  <div>
    父{{myName}}
    <home :myName = "myName"/>
    <button@click="changeName">changeName</button>
  </div>
</template>
<script>
import {ref} from "vue"
import Home from "./components/Home.vue"
export default {
  components:{
    Home
  },
  setup(){
    let myName = ref("scc")
    const changeName = () => {
      myName.value = "xb"
​
    }
    return {
      myName,
      changeName
    }
  }
}

子组件接收参数,并且渲染

我们看一下执行结果

chrome_wNLy3gjkhk.gif

可以明显看出先执行父组建的更新钩子,再去执行子组件的

结束

生命周期非常重要,不仅在面试上,在工作中同样如此