- 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需要被主动调用，不能传回调
网友评论