生命周期

(1）beforeCreate
在实例初始化(new Vue())后执行，此时的数据监听和事件绑定机制都未完成，获取不到DOM节点。（可以在此阶段加loading事件，在加载实例时触发）

（2）created
这个阶段vue实例已经创建，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始，仍然获取不到DOM元素。（在此阶段，初始化完成时的事件写在这里，如在这结束loading事件，也可以进行异步请求）

（3）beforeMount
在这个阶段完成了DOM的初始化，但仍然无法获取到具体的DOM元素，因为vue还没有进行根节点挂载，但是根节点已经创建完成，下面Vue对DOM的操作将围绕这个根节点进行。（beforeMount这个阶段是过渡性的，在项目中使用得比较少）

（4）mounted
在这个阶段，实例已经被挂载完成了，也就是能获取到数据和DOM元素了。
（5）beforeUpdate
在数据发生改变，但页面还没有完成更新时执行的操作，在此阶段视图的数据和DOM元素的数据没有保持同步。（这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器）

（6）updated
这个时候数据发生了改变，并且视图页面也已经完成了更新，因此，该阶段看到的DOM元素的内容是最新内容。

（注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick）

（7）beforeDestroy
此阶段Vue实例仍然完全可用，也就是还能访问到页面的响应式数据和事件。（可以在这里注销eventBus等事件）

（8）destroyed
DOM元素被销毁，此时对应 的Vue 实例所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

【一】配置项API生命周期

• beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

【二】组合式API生命周期

beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

<template>
  <div class="home">
    <h1>生命周期钩子</h1>
    <h3>年龄是：{{ age }}</h3>
    <button @click="addAge">点击age+1</button>


  </div>
</template>

<script>

import {ref, reactive, watch, watchEffect,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    // 生命周期钩子
    // 1 写在这里是就是beforeCreate
    console.log('beforeCreate')

    const age=ref(19)
    function addAge(){
      age.value++
    }

    //2 写在这里是就是created
    console.log('created',age.value)

    //3 beforeMount-->onBeforeMount
    // onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
    onBeforeMount(()=>{
      console.log('onBeforeMount','组件挂载前')
    })
    //4 mounted-->onMounted
    onMounted(()=>{
      console.log('onMounted','组件挂载后')
    })
    //5 beforeUpdate-->onBeforeUpdate
    onBeforeUpdate(()=>{
      console.log('onBeforeUpdate','更新之前')
    })
    //6 updated-->onUpdated
    onUpdated(()=>{
      console.log('onUpdated','更新之后')
      console.log(age.value)
    })

    //7 beforeUnmount-->onBeforeUnmount
    onBeforeUnmount(()=>{
      console.log('onBeforeUnmount','销毁之前')
    })

    //8 unmounted-->onUnmounted
    onUnmounted(()=>{
      console.log('onUnmounted','销毁后')
    })

    return {age,addAge}
  },
}
</script>