8月面试记录

75 阅读2分钟

1.vue-router中的路由守卫

全局守卫:beforeEach, beforeResolve, afterEach

beforeEach
接受一个function,传入function的参数是:
to:要进入的目标路由对象
from:正要离开的路由
nextfunction,一定要调用这个方法来resolve这个钩子
        next(): confirmed
        next(false): 中断当前导航,回到from
        next('/') or next({path:'/'}): 跳转
        next(new error): 中断,并把错误传递给router.onError()注册过的回调

beforeResolve
和 beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

afterEach
不接受next函数,也不会改变导航本身

路由独享守卫

beforeEnter
在路由配置上直接定义,与前置守卫beforeEach相同

组件内的守卫 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫 (2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。

2.$nextTick原理

dom更新后回调,没有提供回调的情况下,返回一个promise

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更

同一个 watcher 被多次触发,只会被推入到队列中一次

Vue 在内部对异步队列尝试使用原生的 Promise.thenMutationObserver 和 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 不允许动态添加根级响应式属性。