1.vue-router中的路由守卫
全局守卫:beforeEach, beforeResolve, afterEach
beforeEach
接受一个function,传入function的参数是:
to:要进入的目标路由对象
from:正要离开的路由
next:function,一定要调用这个方法来resolve这个钩子
next(): confirmed
next(false): 中断当前导航,回到from
next('/') or next({path:'/'}): 跳转
next(new error): 中断,并把错误传递给router.onError()注册过的回调
beforeResolve
和 beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
afterEach
不接受next函数,也不会改变导航本身
路由独享守卫
beforeEnter
在路由配置上直接定义,与前置守卫beforeEach相同
组件内的守卫 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。 - 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入。
2.$nextTick原理
dom更新后回调,没有提供回调的情况下,返回一个promise
Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更
同一个 watcher 被多次触发,只会被推入到队列中一次
Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替。
# MutationObserver 监测 DOM 变化
# setImmediate
3.vue.$set
写法:this.$set(this.dataxxx,”key”,value')
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。
它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 `this.myObject.newProperty = 'hi'`)
受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。
因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
Vue 不允许动态添加根级响应式属性。