vue生命周期
image.png
| 生命周期钩子 | 详细 |
|---|---|
| beforeCreate | 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 |
| created | 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted el | 被新创建的 vm. |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 |
| activated | keep-alive 组件激活时调用。 |
| deactivated | keep-alive 组件停用时调用。 |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
| destroyed Vue | 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 |
（除了beforeCreate和created钩子之外，其他钩子均在服务器端渲染期间不被调用。）
1、beforeCreate执行时：data和el均未初始化，值为undefined
2、created执行时：Vue 实例观察的数据对象data已经配置好，已经可以得到app.message的值，但Vue 实例使用的根 DOM 元素el还未初始化
3、beforeMount执行时：data和el均已经初始化，但从此时el并没有渲染进数据，el的值为“虚拟”的元素节点
4、mounted执行时：此时el已经渲染完成并挂载到实例上
beforecreated：el 和 data 并未初始化 ；
created：完成了 data 数据的初始化，el没有；
beforeMount：完成了 el 和 data 初始化 ；
mounted ：完成挂载。
（注意：在beforeMount阶段应用的 Virtual DOM（虚拟Dom）技术，到后面mounted挂载的时候再把值渲> 染进去。）
5、在beforeUpdate可以监听到data的变化，但是view层没有被重新渲染，view层的数据没有变化。
6、updated钩子被调用时候，组件dom才被更新，view层才被重新渲染，数据更新。
7、当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段;
当执行beforeDestroy的时候，实例身上所有的data和所有的methods,以及过滤器、指....都处于可用状态，此时，还没有真正执行销毁的过程。
8、当执行到了destroyed函数的时候，组件已经被完全销毁了， 此时,组件中所有的数据、 方法、指令、过滤器...都已经不可用了。
销毁期
触发条件： 当组件销毁时
- beforeDestroy
- destroyed
这两个钩子功能一致的，这两个钩子没有太大的区别
作用： 用来做善后的,比如计时器的关闭 第三方实例的删除
通过开关的形式 - 外部销毁
调用 $destroy 方法 - 内部销毁
对比： 内部销毁 vs 外部销毁
外部销毁不仅能销毁组件，也能销毁该组件的dom结构
内部销毁只能销毁组件，不能销毁组件的dom结构
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
new vue里的template
1.如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数
2.如果没有template参数选项，则将外部的HTML作为模板编译（template），也就是说，template参数选项的优先级要比外部的HTML高
<div id="app"><p>模板是在外部HTML中找到的~</p></div>
创建对象实例：
new Vue({
el: '#app',
template: '<div id="app"><p>模板在templated参数中找到了哟~</p></div>'
})
最终显示的是“模板在templated参数中找到了哟”而不是“模板是在外部HTML中找到的~”，因为template参数的优先级比外部HTML的优先级要高
【注意】render选项参数比template更接近Vue解析器！所以综合排列如下：
render函数选项 > template参数 > 外部HTML
为什么判断el要发生在判断template前面呢
因为Vue需要通过el的“选择器”找到对应的template。总结一下上述的过程，Vue通过el参数去找到对应的template。然后,根据el参数给出的“选择器”，首先去Vue实例对象本身的template选项参数中找，如果没有template参数，则到外部HTML中寻找，找到后将模板编译成render函数
