- vue生命周期
从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程
-
beforeCreate:组件刚被创建,组件属性计算之前;
this指向创建的实例;可以在这里添加loading事件;
data computed watch methods上的方法和数据均不能访问
-
created:组件实例创建完成,
完成数据(data props computed)的初始化 导入依赖项。
可访问data computed watch methods上的方法和数据
未挂载DOM,不能访问ref为空数组
可在这结束loading,还做一些初始化,实现函数自执行, 可以对data数据进行操作,可进行一些请求,请求不易过多,避免白屏时间太长。
若在此阶段进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中
el属性:检查vue配置,即new vue{}里面的el是否存在,有就继续检查template项,没有则手动绑定调用vm.$mount(),
-
beforeMount:模板编译,挂载之前,相关的render函数首次被调用
有了el,编译了template|/outerHTML
能找到对应的template,并编译成render函数
-
mounted:编译、挂载,此时可以操作dom
完成挂载DOM 和渲染;可在mounted钩子对挂载的dom进行操作
即有了DOM 且完成了双向绑定 可访问DOM节点,$ref
可在这发起后端请求,拿回数据,配合路由钩子做一些事情;
-
beforeUpdate:组件更新之前。<u style="box-sizing: border-box;">数据更新时调用</u>,发生在虚拟dom重新渲染之前,可以在这一步中进一步更改状态
可在更新前访问现有的DOM,如手动移除添加的事件监听器;
-
updated:组件更新后
可执行依赖的dom 操作
注意:不要在此函数中操作数据,会陷入死循环的。
-
activated:keep-alive组件激活时调用
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了, 如果我们的子组件需要在每次加载的时候进行某些操作,可以使用activated钩子触发
deactivated:keep-alive组件被移除时调用
-
beforeDestroy:实例销毁之前调用,在这一步实例仍然完全可用
在执行app.$destroy()之前
可做一些删除提示,如:你确认删除XX吗?
可用于销毁定时器,解绑全局时间 销毁插件对象
-
destroyed:实例销毁后调用,调用后,vue实例指示的所有东西都会解绑定,所有的事件监听器移除,子实例也被销毁。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1628" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 30px; width: inherit;">当前组件已被删除,销毁监听事件 组件 事件 子实例也被销毁
这时组件已经没有了,你无法操作里面的任何东西了。</pre>
- 子父组件的生命周期
仅当子组件完成挂载后,父组件才会挂载 当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次) 父子组件在data变化中是分别监控的,但是在更新props中的数据是关联的(可实践) 销毁父组件时,先将子组件销毁后才会销毁父组件
兄弟组件的初始化(mounted之前)分开进行,挂载是从上到下依次进行 当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的
mixin中的生命周期与引入该组件的生命周期是仅仅关联的,且mixin的生命周期优先执行
- 路由守卫
全局守卫:
-
router.beforeEach:当一个导航触发时,全局前置守卫按照创建顺序调用。
一般在这个守卫方法中进行全局拦截,比如必须满足某种条件(用户登录等)才能进入路由的情况
-
router.beforeResolve (v 2.5.0+)
全局解析守卫
和beforeEach类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用 即在 beforeEach 和 组件内beforeRouteEnter 之后
参数和beforeEach一致,也需要调用next对导航确认
-
router.afterEach
全局后置钩子 在所有路由跳转结束的时候调用 这些钩子不会接受 next 函数也不会改变导航本身
-
beforeEnter
可直接定义在路由配置上,和beforeEach方法参数、用法相同
组件内:
-
beforeRouteEnter
在渲染该组件的对应路由被
确认
前调用,用法和参数与beforeEach类似,next需要被主动调用 注意:此时组件实例还未被创建,不能访问this
可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数
beforeRouteUpdate:在当前路由改变,并且该组件被复用时调用,可以通过this访问实例, next需要被主动调用,不能传回调
beforeRouteLeave:导航离开该组件的对应路由时调用,可以访问组件实例
this
,next需要被主动调用,不能传回调