vue3 --- 生命周期方法

1. vue生命周期

2. setup

   使用Composition API 的入口
   在beforeCreate之前调用
   在setup中没有this
   返回对象中的属性刻在模板中使用
   setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 
   也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
   setup函数是 Composition API（组合API）的入口
   在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
   setup() {
       // 组件创建
       console.log('组件创建')
   },

3. onBeforeMount

    onBeforeMount(() =>{
        // 挂载组件
        // 组件将要被挂载了
        // 可以访问到要挂载的目标
        // 不能访问到组件的dom
        // 这里可以访问到dom 但不能访问到组件的dom只能访问到要挂载的目标dom
        console.log('onBeforeMount 组件开始挂载')
    }) 

4. onMounted

    onMounted(() =>{
        // 组件挂载完成
        // 只有当组件挂载完成之后才能访问到组件的dom
        console.log('onMounted 组件挂载完成')
    }) 

5. onBeforeUpdate

    onBeforeUpdate(() =>{
        // 只有更新和模板发生关联的数据才会触发这个钩子
        // 和模板绑定的数据更新之前
        console.log('onBeforeUpdate 和模板绑定的数据更新之前')
    }) 

6. onUpdated

    onUpdated(() =>{
        // 只有更新和模板发生关联的数据才会触发这个钩子
        // 和模板绑定的数据更新完成之后
        console.log('onUpdated 和模板绑定的数据更新完成之后')
    })

7. onBeforeUnmount

    onBeforeUnmount(() =>{
        // 一般像页面组件 页面离开之前 保存数据 可以通过这个钩子来完成
        // 当组件销毁之前触发
        console.log('onBeforeUnmount 当组件销毁之前触发')
    }) 

8. onUnmounted

    onUnmounted(() =>{
        // 当组件销毁之后触发
        console.log('onUnmounted 当组件销毁之后触发')
        //等待系统自动回收对象
        //销毁之后组件的对象还在，但是跟vue的实例脱离了关系了
    })