[JavaScript知识库]Vue的生命周期

vue实例从创建到销毁的过程就是生命周期。vue框架内置的函数（钩子函数），随着生命周期自动执行，分为以下四个阶段，包含八个钩子函数。

一、初始化阶段

1. beforeCreate()
   • 执行机制：new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"。
2. created()
   • 使用场景: 网络请求, 注册全局事件。
   • 执行机制：data和methods方法初始化以后。

二、挂载阶段

3. beforeMount()
   • 使用场景: 预处理data, 不会触发updated钩子函数。
   • 执行机制：真实DOM挂载之前。
4. mounted()
   • 使用场景: 挂载后真实DOM。
   • 执行机制：真实DOM挂载以后。

三、更新阶段

5. beforeUpdate()
   • 前提: 数据发生改变之后
   • 执行机制：更新之前。
6. updated()
   • 使用场景: 获取真实DOM。
   • 执行机制：更新之前。

四、销毁阶段

7. beforeDestroy()
   • 使用场景: 获取真实DOM。
   • 执行机制：更新之前。
8. destroyed()
   • 执行机制: v-if=“false” 销毁Vue实例。
   • 使用场景：移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法。

  // 一. 初始化
    // new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"
    beforeCreate(){
          console.log("beforeCreate -- 执行");
          console.log(this.msg); // undefined
    },
    // data和methods初始化以后
    // 场景: 网络请求, 注册全局事件
    created(){
         console.log("created -- 执行");
          console.log(this.msg); // hello, Vue

        this.timer = setInterval(() => {
             console.log("哈哈哈");
          }, 1000)
    },

    // 二. 挂载
    // 真实DOM挂载之前
    // 场景: 预处理data, 不会触发updated钩子函数
    beforeMount(){
          console.log("beforeMount -- 执行");
          console.log(document.getElementById("myP")); // null

        this.msg = "重新值"
    },
    // 真实DOM挂载以后
    // 场景: 挂载后真实DOM
    mounted(){
          console.log("mounted -- 执行");
          console.log(document.getElementById("myP")); // p
    },

    // 三. 更新
    // 前提: data数据改变才执行
    // 更新之前
    beforeUpdate(){
        // console.log("beforeUpdate -- 执行");
        // console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
    },
    // 更新之后
    // 场景: 获取更新后的真实DOM
    updated(){
         console.log("updated -- 执行");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    },

    // 四. 销毁
    // 前提: v-if="false" 销毁Vue实例
    // 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法
    beforeDestroy(){
        console.log('beforeDestroy -- 执行');
        clearInterval(this.timer)
    },
    destroyed(){
       console.log("destroyed -- 执行");
    }