Vue生命周期钩子执行过程

以一段代码以及注释，解释生命周期钩子的执行过程。

附上官方的图解地址：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

代码内容也是根据官方文档进行整合。

<script>

    var vm = new Vue({

      el:"app",

      data:{

        msg:"hi vue"

      },

      //在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前调用

      beforeCreate() {

        console.log('beforeCreate');

      },

      /*在实例创建完成后立即调用。

      在这一步，实例已完成以下配置：数据观测(data observer),属性和方法的运算,watch/event事件回调。

      然而，挂载阶段还未开始，$el属性不可见。*/

      created() {

        console.log('created');

      },

      //在挂载开始之前进行调用，相关的渲染(render)函数首次调用。

      beforeMount() {

        console.log('beforeMount');

      },

      //实例被挂载后调用，这时节点(el)已被vue的节点(vm.$el)替换。

      mounted() {

        console.log('mounted');

      },

      //数据更新之前被调用

      beforeUpdate() {

        console.log('beforeUpdate');

      },

      //数据更新完毕之后被调用,此时DOM结构也更新完了。

      updated() {

        console.log('updated');

      },

      //被 keep-alive 缓存的组件激活时调用。

      activated() {

        console.log('activated');

      },

      // 被 keep-alive 缓存的组件停用时调用。

      deactivated() {

        console.log('deactivated');

      },

      // 实例销毁之前调用。在这一步，实例仍然完全可用。

      beforeDestroy() {

        console.log('beforeDestroy');

      },

      /* 实例销毁后调用。

      该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。*/

      destroyed() {

        console.log('destroyed');

      },

      /*当捕获一个来自子孙组件的错误时被调用。

      此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。

      此钩子可以返回 false 以阻止该错误继续向上传播。*/

      errorCaptured: (err, vm, info) => {

        console.log('errorCaptured');

      },

    });

  </script>

/**以上内容为个人笔记，若有疑问，欢迎大家留言。*/