Vue3生命周期

1 生命周期简介

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!

• 周期图解：
  

• 常见钩子函数

• onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。

• onMounted() 注册一个回调函数，在组件挂载完成后执行。

• onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

• onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

• onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。

• onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。

6.7.2 生命周期案例

<script setup>

    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    
    let message =ref('hello')
   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
    onBeforeUpdate(()=>{
      console.log('-----------onBeforeUpdate---------')
      console.log(message.value)
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>

<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
  
</template>

<style scoped>
</style>