定义:
每个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实例销毁时调用。