【无标题】Vue的⽣命周期详解

#Vue的⽣命周期详解
每个Vue实例都有⼀个完整的⽣命周期，当⾯试官提到让你谈谈对Vue的⽣命周期的理解时，
如何回答才是⼀个令⼈满意的回答？
第⼀个问题：什么是Vue的⽣命周期？
通俗的来说，⼀个Vue实例从创建到销毁的这个过程，我们称之为Vue的⽣命周期。
整个流程？
开始创建⼀个Vue实例 —> 初始化Vue实例内部数据 —> 模板开始编译 —> 挂载并渲染
#dom
—> 更新数据(可能有这个过程) —> Vue实例开始销毁 —> 实例销毁完毕
整个流程⼤概如上，这个流程⾥，Vue实例会触发⼀些钩⼦。谈到这，可能有童鞋会有
疑问，什么是钩⼦？
什么是钩⼦？
钩⼦，其实是钩⼦函数的简称，说的简单点，就是Vue实例的⽣命周期⾥，⾃动会触发
的函数，有的话就执⾏这个函数，这也就是我们常说的钩⼦。
简单的概念和流程到此结束，那么Vue组件的⽣命周期⾥，这些钩⼦触发的时候，到底⼲了什
么事情？
详解触发钩⼦时已完成的操作及建议的操作
#beforeCreate
实例初始化，将this指向Vue实例，此时data computed watch methods上的⽅法
和数据均不能访问
可在此处加⼊loading事件
#created
实例创建完成，完成数据(data props computed)的初始化 ，可访问其中的数据。
此时未挂载dom，也不能访问Vue实例中的$el属性没有dom，也就是说$ref为空数组了
可以对data数据进⾏操作，可进⾏⼀些请求，请求不易过多，避免⽩屏时间太⻓。
若在此阶段进⾏的 DOM 操作⼀定要放在 Vue.nextTick() 的回调函数中，dom更新
的时候，才会触发nextTick⾥的回调函数。
也可在此处结束loading
#berofeMount
此时$el挂载完毕，并且把Vue实例中template部分编译成render函数,或者直接执⾏render函数使⽤render函数的结果和我们之前使⽤template解析出来的结果是⼀样的。render函数是发⽣在beforeMount和mounted之间的，这也从侧⾯说明了，在beforeMount的时候，$el还只是我们在HTML⾥⾯写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执⾏了render函数的内容。
#mounted
完成创建vm.$el，dom此时已经根据template编译的render函数，渲染完成有了DOM且完成了双向绑定可访问DOM节点及$ref属性
#beforeUpdate(更新数据时触发)
数据更新之前，可在更新前访问现有的DOM,如⼿动移除添加的事件监听器
updated
完成虚拟DOM的重新渲染
组件DOM 已完成更新；
可执⾏依赖的dom 操作
注意：不要在此函数中操作数据，会陷⼊死循环的。
#activated
在使⽤ vue-router 时，有时我们会使⽤ keep-alive 标签来保持组件的状态，避
免频繁发送请求。此时，created钩⼦就不会被重复调⽤了。因此，如果我们需要
在组件每次加载的时候进⾏某些操作，可以在activated这个钩⼦当中触发。
#deactivated
被 keep-alive 标签包住的组件，被移除时触发
#beforeDestroy
实例销毁之前调⽤。在这⼀步当中，实例仍然完全可⽤。
可做⼀些删除提示，⽐如，“您确认离开此⻚⾯”
可⽤于销毁定时器，解绑全局事件或者销毁引⼊的插件对象
destroyed
Vue 实例销毁后调⽤。此时Vue实例⾥的数据解除绑定，所有的事件监听器也被移
除了
最后丢⼀张官⽹的Vue⽣命周期图解给⼤家巩固下

谢谢大家的观看，你的点赞与关注就是对我最大的支持

Thank you for watching. Your praise and attention are my greatest support

Спасибо вам за просмотр, ваши похвалы и внимание, это моя самая большая поддержка