vue | 生命周期篇

1.常用生命周期：四个阶段(创建、挂载、更新、销毁)

beforeCreate(){  //在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
    console.log("beforeCreate")
},
created(){  //在实例创建完成后被立即同步调用
    console.log("created")
},
beforeMount(){  // 完成模板编译,虚拟dom已经创建完成,即将开始渲染
    console.log("beforeMount")
},
mounted(){  // Vue实例已经挂载在真实dom节点上，可以获取dom节点对dom进行操作
    console.log("mounted")
},
beforeUpdate(){  // 在数据发生改变后，DOM 被更新之前被调用
    console.log("beforeUpdate")
},
updated(){  // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用
        console.log("updated")
},
beforeDestroy(){  //实例销毁之前调用。在这一步，实例仍然完全可用
    console.log("beforeDestroy")
},
destroyed(){  //实例销毁后调用。实例都被销毁
    console.log("destroyed")
},

  ✎ 进入组件后执行的生命周期有：

        

        四个生命周期的对比关于（真实dom节点vm.$el和数据对象vm.$data）：

        beforeCreate：  vm.$el和vm.$data都取不到

        created：vm.$el取不到 、vm.$data取得到 （组件实例创建完成，data数据已经被Object.defineProperty劫持完成，属性也绑定成功，但真实dom还没有生成，$el还不能用）

        beforeMount：vm.$el取不到 、vm.$data取得到

        mounted：vm.$el和vm.$data都取得到（el选项所对应的视图节点已经被新创建的vm.$el替换，并挂载到实例上。此时响应式数据都已经渲染完成了。）

       补充：在created中如何获取到dom：

      （让获取的dom在异步代码中获取的，如setTimeout、promise.xxx请求、

                使用this.$nextTick(function () {
                        // 仅在整个视图都被重新渲染之后才会运行的代码
                })

        ）

        总结：对vm.$data做操作，在created生命周期以后就可以，因为此时根实例相关的属性都已准备完毕。

  ✎ 如果引入子组件后，执行的生命周期顺序：

        

         总结：先父组件beforeCreate、created、beforeMount  -  后子组件beforeCreate、created、beforeMount、mounted  -  最后父组件mounted

  ✎ 关于发送请求：

      ① 为什么不放在beforeCreate里：该钩子函数的data数据还没有挂载在vue对象身上，一般数据从后端返回都需要赋值给vue中的属性（data中挂载的）。

        另：若请求是在methods中封装好的，beforeCreate中调用是找不到该方法的，会报错。

      ②为什么不放在beforeMount或mounted  里： 这两个钩子发送请求会有点晚，增加页面的loading时间； vue的SSR不支持beforeMount和mounted钩子函数。

      ③发送请求在created还是mounted：根据具体需求来看。js加载顺序是先同步后异步。具体看生命周期的执行顺序来（如有子组件的情况下）。

       总结：发送请求建议放在created中，更快也有助于一致性。

2. 使用keep-alive时会增加两个生命周期

activated(){  //被 keep-alive 缓存的组件激活时调用
    console.log("activated")
},
deactivated(){ //被 keep-alive 缓存的组件失活时调用
    console.log("deactivated")
},

   ✎ 使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行  deactivated 钩子函数；所以第一次进入组件页时会执行创建、挂载的两个阶段 + activated ，第二次进入时只执行 activated 。

3.  2.5.0+新增 （暂无业务场景）

errorCaptured：在捕获一个来自后代组件的错误时被调用。