面试问题记录

红衣脱尽芳心苦
105 阅读3分钟

VUE

1.vuex

1.vuex是什么，哪些场景使用？

vuex是vue框架中的状态管理。 用于在单页面应用中，组件之间状态的共享，例如侧边栏，登录状态等等。。。

2.vuex有哪些属性

分别是 state， getter， mutation，action， module

  • state
    1. vuex的数据源存放地
    2. state里的数据是响应式的，state里的数据变化会同步展示在视图上
  • getter
    1. 可对state数据进行计算操作，理解为store的计算属性
  • mutation
    1. 通过commit方法可以调用mutation里的方法修改state数据，vuex的原则是只通过mutation修改state数据
  • action
    1. 通过dispatch方法调用action，可用于vuex的异步操作，在通过调用mutation修改state数据
    2. 虽然原则上不支持，但是直接修改state也是可以生效的
  • moduel
    1. vuex比较复杂难以维护的时候可以通过module将vuex拆分为多个模块，每个模块都有单独的state，getter，mutation，action

2.路由守卫

1. 路由守卫是什么？哪些使用场景？

路由守卫主要是通过跳转或者取消的方式守卫导航 多用于权限控制

2. 路由守卫有哪些

  • 前置守卫 router.beforeEach
const router = createRouter({ ... })

router.beforeEach((to, from, next) => {
  // to: 即将进入的目标
  // from: 正要离开的路由
  // next：可选参数，可通过调用next() 进行路由跳转， 确保next只执行一次
  // ...
  // 返回 false 以取消导航
  return false
})
  • 后置钩子 router.afterEach 后置钩子不会改变导航本身，也不会接受next函数， 对于修改页面标题，声明页面等辅助功能比较有用
router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})
  • 全局解析守卫 router.beforeResolve 执行时机：每次导航时都会触发，但是确保在导航被确认之前，同时所以组件内守卫和异步路由被解析之后，解析守卫就会被调用
router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.beforeResolve 是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。 ps: 我没用过

3.完整导航解析流程

  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 的回调函数，创建好的组件实例会作为回调函数的参数传入。 [Vue Router 导航守卫](导航守卫 | Vue Router (vuejs.org))

3.vue响应式(vue2)

  1. 在初始化时，observe 拿到data， 创建Observer类，判断是否为对象，如果是执行walk方法，遍历每一项执行defineReative。
  2. defineReative核心是Object.defineProperty, 观测对象是否从新调用observe，并且初始化dep。
  3. dep是一个依赖收集器，每一个属性都会有一个dep，它作为闭包的存在，负责收集依赖和通知更新， 如果监听到对象出发了defineProperty的set方法，dep执行dep.notify方法通知watcher更新
  4. Watch初始化会执行wtacher.run 方法渲染，并将watcher实例传递给dep.target。初始化将warcher挂在到Dep.target， this.getter 开始渲染页面。渲染页面需要对数据取值，触发get回调，dep.depend收集依赖，Dep.target为watcher，调用addDep方法，并传入dep实例。addDep中添加完dep后，调用dep.addSub并传入当前watcher实例，将传入的watcher收集起来。至此依赖手机流程完毕
avatar
文章
阅读
粉丝