vue生命周期

  定义:

    每个vue实例在被创建的时候都要经过一系列的初始化过程,这就是vue的生命周期; 

    通俗点说的话,就是从开始创建、初始化数据、编译模板,挂载dom、渲染、更新、卸载等的一系列过程。

    说到生命周期就不得不提官网的生命周期图示了 

     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 

    可以看到,在vue整个生命周期中,会有很多钩子函数提供给我们,以便我们在不同的周期来进行操作。

  钩子函数:

名称 描述
beforeCreate 组件的实例被创建
created 实例创建完成,属性已经绑定,但Dom还没有生成,$el属性还不存在
beforeMount   模板挂载之前
mounted 模板挂载之后
beforeUpdate 组件更新之前
updated 组件更新之后
activated kee-alive的组件被激活时
deactivated keep-alive的组件被移除时
beforeDestroy 组件销毁前调用
destroyed 组件销毁后调用

  1,beforeCreate ——> created之间的钩子

    在这个生命周期之间,进行了vue的初始化,created的时候,data属性已经进行了数据的绑定,但此时还没有el选项。

  2,created ——> beforeMount之间的钩子

    在这期间,会判断是否有el选项,有的话就继续执行生命周期,如果没有就停止生命周期,直到在vue实例上调用vm.$amount(el)

    这期间,如果有template选项,则将其作为模板编译成render函数,如果提供了render选项,则忽略template选项,如果没有template选项和render选项,则以外部HTML作为模板进行编译。

    这里可以发现,render选项优先级 > template选项 > 外部html

  3,beforeMount -——> mounted之间的钩子

    给实例添加$el选项,并替换掉挂载的dom元素

  4,mounted

    mounted之前,页面中的message还以{{}}这种形式存在的,因为此时还没有挂载到页面上,还是以虚拟dom的形式存在,在mounted时,进行dom的挂载。

  5,beforeUpdate和updated钩子

    当vue的data中数据发生变化时会触发。

  6,beforeDestroy和destroy钩子     

    beforeDestroy钩子函数在实例销毁之前调用,实例在这时候还是可用

    destroy时在vue实例销毁时调用。

 

    

      

  

原文地址:https://www.cnblogs.com/wjyz/p/10167170.html