1 Vue2的生命周期钩子有哪些？数据请求放在哪个钩子？

  • 共11个

create（before+ed）*2 由于SSR会调用create，这种情况下不适合数据请求

mount*2

update*2

destroy*2

activated 被keep-alive缓存的组件激活时调用

deactivated ….失活时

errorCaptured组件或组件后代报错时，上报一下当前页面有哪些崩溃

2 Vue2组件间通信方式有哪些

  1. 父子组件：使用「props 和事件」进行通信

  2. 爷孙组件：

    1. 使用两次父子组件间通信来实现
    2. 使用「provide（爷） + inject（孙）」来通信

  3. 任意组件：使用 eventBus = new Vue() 来通信

    1. 主要API 是 eventBus.$on 和 eventBus.$emit
    2. 缺点是事件多了就很乱，难以维护

  4. 任意组件：使用 Vuex 通信（Vue 3 可用 Pinia 代替 Vuex）

3 Vuex用过吗，怎么理解

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库

  • 说出核心概念的名字和作用：store/State/Getter/Mutation/Action/Module

  1. store 是个大容器，包含以下所有内容
  2. State 用来读取状态，带有一个 mapState 辅助函数
  3. Getter 用来读取派生状态，附有一个 mapGetters 辅助函数
  4. Mutation 用于同步提交状态变更，附有一个 mapMutations 辅助函数
  5. Action 用于异步变更状态，但它提交的是 mutation，而不是直接变更状态。
  6. Module 用来给 store 划分模块，方便维护代码
  • 常见追问：Mutation 和 Action 为什么要分开？
    • 答案：为了让代码更易于维护。（可是 Pinia 就把 Mutation 和 Action 合并了呀）

4 VueRouter用过吗？怎么理解？

  • Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

  • 说出核心概念的名字和作用：

    • router-link单击跳转

    • router-view 容纳路由视图

    • children 嵌套路由

    • Hash 模式和 History 模式

    • 路由守卫（钩子）

    • 懒加载 import(‘App’)

  • 常见追问：

    1. Hash 模式和 History 模式的区别？
      1. 一个用的 Hash，一个用的 History API
      2. 一个不需要后端 nginx 配合，一个需要
    2. 导航守卫如何实现登录控制？router.beforeEach
1
2
3
4
5

router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next()
  if (to是受控页面 && 没有登录) return next('/login?return_to=...')
  next()
})

5 Vue2是如何实现双向绑定的

  • 一般使用v-model实现，是v-bind:value和v-on:input的语法糖

    1. v-bind:value 实现了 data => UI 的单向绑定

      • 通过Object.defineProperty API给 data（递归）创建 getter 和 setter ，用于监听 data 的改变，data一变就会安排改变UI

    2. v-on:input 实现了 UI => data 的单向绑定

      • 通过 template compiler 给DOM 添加事件监听，DOM input 的值变了就会去修改data