vue 进阶-生命周期、钩子函数

vue 进阶-生命周期、钩子函数

生命周期

创建前/后: 在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初 始化。在 created 阶段，vue 实例的数据对象 data 有了，el 还没有。 载入前/后:在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲 染。
更新前/后:当 data 变化时，会触发 beforeUpdate 和 updated 方法。 销毁前/后:在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解 除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

生命周期钩子的一些使用方法:
beforecreate : 可以在这加个 loading 事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到 DOM 节点
beforeMount：在组件内容被渲染到页面之前自动执行的函数，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。
mounted：在组件被渲染之后自动执行的函数。一般我们的异步请求都写在这里。在这个阶段，数据和 DOM 都已被渲染出来。
beforeUpdate：数据变化的时候自动执行的函数，此时变化后的数据还未渲染到页面之上。
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作 dom

vue-router 钩子函数

全局前置守卫 router.beforeEach
全局解析守卫 router.beforeResolve
全局后置钩子 router.afterEach
路由独享的守卫 beforeEnter
组件内的守卫 beforeRouteEnter beforeRouteUpdate 、 beforeRouteLeave

route 和 router 的区别是什么?

route 是“路由信息对象”，包括 path , params , hash , query , fullPath , matched , name 等路由信息参 数。
router 是“路由实例对象”，包括了路由的跳转方法( push 、 replace )，钩子函数等。