14：vue3 生命周期（生命周期钩子）

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

生命周期函数

       创建期：beforeCreate     created

       挂载期：beforeMount      mounted

       更新期：beforeUpdate     updated

       销毁期：beforeUnmount  unmounted

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

 

 

示例代码，App.vue中书写

<template>
  <p>{{ message }}</p>
  <button @click="updateHander">更新按钮</button>
</template>

<script>

export default{
    data(){
      return{
        message:"组件更新前数据"
      }  
    },
    methods:{
      updateHander(){
        this.message="组件更新后数据"
      }
    },
    beforeCreate() {
      console.log("组件创建之前");
    },
    created() {
      console.log("组件创建之后");
    },
    beforeMount() {
      console.log("组件挂载之前");
    },
    mounted() {
      console.log("组件挂载之后");
    },
    beforeUpdate() {
      console.log("组件更新之前");
    },
    updated() {
      console.log("组件更新之后");
    },
    beforeUnmount() {
      console.log("组件销毁之前");
    },
    unmounted() {
      console.log("组件销毁之后");
    }
    
}
</script>