vue生命周期

官方生命周期图

vue整个过程作了些什么

要理解生命周期函数，咱们须要了解vue实例从生成到销毁经历了哪些过程

• 经过new Vue（）来建立一个实例空壳
• create
• mount
• update
• destroy

new Vue()建立实例

咱们都知道vue项目都是经过组件化进行实现的，一个页面经过若干组件组成，构成一个组件树，那么每个组件都经过一个vue实例来进行管理，每当要渲染一个组件前，都会为该组件建立一个vue实例来管理组件中的数据和事件方法。 经过new Vue()建立实例时，实际建立了一个vue实例的空壳，初始化生命周期和事件

注意：这时候实例中的data选项尚未数据，因此在beforecreated中没法访问到data中的数据

create

导入依赖项，将方法，data，计算属性等等注入到实例当中

mount

在created后，beforemount前，会检查el选项，没有就会调用vm.$mount()，而后就会继续检查template，没有的话就绑定el选项的html，进入beforemount后，编译模板为虚拟的DOM，，开始render，将虚拟DOM渲染到页面上

update

当数据更新时，vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染

destroy

解除绑定，销毁实例

生命周期钩子

生命周期钩子函数详解

beforecreate

完成实例初始化，初始化非响应式变量 this指向建立的实例； 能够在这加个loading事件； data computed watch methods上的方法和数据均不能访问

created

实例建立完成 完成数据(data props computed)的初始化 导入依赖项。 可访问data computed watch methods上的方法和数据 未挂载DOM,不能访问ref为空数组 可在这结束loading，还作一些初始化，实现函数自执行, 能够对data数据进行操做，可进行一些请求，请求不易过多，避免白屏时间太长。 若在此阶段进行的 DOM 操做必定要放在 Vue.nextTick() 的回调函数中

berofeMount

有了el,编译了template|/outerHTML 能找到对应的template,并编译成render函数

mounted

完成建立vm.ref 可在这发起后端请求，拿回数据，配合路由钩子作一些事情； 可对DOM 进行操做

beforeUpdate

数据更新以前 可在更新前访问现有的DOM,如手动移除添加的事件监听器；

updated

完成虚拟DOM的从新渲染和打补丁； 组件DOM 已完成更新； 可执行依赖的dom 操做 注意：不要在此函数中操做数据，会陷入死循环的。

activated

在使用vue-router时有时须要使用来缓存组件状态，这个时候created钩子就不会被重复调用了， 若是咱们的子组件须要在每次加载的时候进行某些操做，可使用activated钩子触发

deactivated

for keep-alive 组件被移除时使用

beforeDestroy

在执行app.$destroy()以前 可作一些删除提示，如：你确认删除XX吗？ 可用于销毁定时器，解绑全局时间 销毁插件对象

destroyed

前组件已被删除，销毁监听事件 组件 事件 子实例也被销毁 这时组件已经没有了，你没法操做里面的任何东西了

子父组件的生命周期

仅当子组件完成挂载后，父组件才会挂载 当子组件完成挂载后，父组件会主动执行一次beforeUpdate/updated钩子函数（仅首次）父子组件在data变化中是分别监控的，可是在更新props中的数据是关联的（可实践）销毁父组件时，先将子组件销毁后才会销毁父组件兄弟组件的初始化（mounted以前）分开进行，挂载是从上到下依次进行当没有数据关联时，兄弟组件之间的更新和销毁是互不关联的mixin中的生命周期与引入该组件的生命周期是仅仅关联的，且mixin的生命周期优先执行