Vue学习笔记 —— 生命周期
什么是生命周期？
每个Vue实例在被创建之前都会经过一系列的初始化过程,这个过程就是vue的生命周期。
同时Vue在一整个生命周期中，提供了很多钩子函数。利用这些钩子函数，我们可以在生命周期的不同时刻进行操作。
钩子函数如下：
- beforeCreate ------------ 创建前状态
- created ------------ 创建完毕状态
- beforeMount ------------ 挂载前状态
- mounted ------------ 挂载结束状态
- beforeUpdate ------------ 更新前状态
- updated ------------ 更新完成状态
- beforeDestroy ------------ 销毁前状态
- destroyed ------------ 销毁完成状态
每一个Vue实例在创建的过程中，都会依次调用这些钩子函数
1、在beforeCreate和created钩子函数之间的生命周期
此阶段Vue会进行初始化事件，进行数据观测。
在created时，data属性会绑定数据（放在data中的属性当值发生改变的同时，视图也会改变）。
补充：此时还是没有el选项。
2、created钩子函数和beforeMount间的生命周期
此阶段会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
如果后续调用了vm.$mount(el)，代码就会继续向下执行。
生命周期对template参数选项的影响：
- 如果vue实例对象中有template参数选项，则将其作为模板编译成render函数。
- 如果没有template选项，则将外部HTML作为模板编译。
- template中的模板优先级要高于outer HTML的优先级。
3、beforeMount和mounted 钩子函数间的生命周期
此阶段给vue实例对象添加$el成员，并且替换掉挂在的DOM元素。
4、mounted
在mounted之前，HTML中的标签还是以JavaScript中的虚拟DOM形式存在的，mounted之后，真实数据替换虚拟DOM。
如下图所示，beforeMount的时候，h1标签中的内容是通过{{message}}进行占位的，也就是虚拟DOM节点。
5、beforeUpdate钩子函数和updated钩子函数间的生命周期
当vue发现data中的数据发生改变时会先后调用beforeUpdate和updated钩子函数，会触发对应组件的重新渲染。
6、beforeDestroy和destroyed钩子函数间的生命周期
实例销毁之前调用beforeDestroy钩子函数。
补充：此时实例仍然完全可用。
Vue 实例销毁后调用destroyed钩子函数。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
参考博客：详解vue生命周期