Vue之高频前端面试题汇总（下）

目录

四、路由

1. Vue-Router 的懒加载如何实现

2. 路由的hash和history模式的区别

3. 如何获取页面的hash变化

4. $route 和$router 的区别

5. 如何定义动态路由？如何获取传过来的动态参数？

6. Vue-router 路由钩子在生命周期的体现

7. Vue-router跳转和location.href有什么区别

8. params和query的区别

9. Vue-router 导航守卫有哪些

10. 对前端路由的理解

五、Vuex

1. Vuex 的原理

2. Vuex中action和mutation的区别

3. Vuex 和 localStorage 的区别

4. Redux 和 Vuex 有什么区别，它们的共同思想

5. 为什么要用 Vuex 或者 Redux

6. Vuex有哪几种属性？

7. Vuex和单纯的全局对象有什么区别？

8. 为什么 Vuex 的 mutation 中不能做异步操作？

9. Vuex的严格模式是什么,有什么作用，如何开启？

10. 如何在组件中批量使用Vuex的getter属性

11. 如何在组件中重复使用Vuex的mutation

六、Vue 3.0

1. Vue3.0有什么更新

2. defineProperty和proxy的区别

3. Vue3.0 为什么要用 proxy？

4. Vue 3.0 中的 Vue Composition API？

5. Composition API与React Hook很像，区别是什么

七、虚拟DOM

1. 对虚拟DOM的理解？

2. 虚拟DOM的解析过程

3. 为什么要用虚拟DOM

4. 虚拟DOM真的比真实DOM性能好吗

5. DIFF算法的原理

6. Vue中key的作用

7. 为什么不建议用index作为key?

---

四、路由

1. Vue-Router 的懒加载如何实现

非懒加载：

import List from '@/components/list.vue'
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})
复制代码

（1）方案一(常用)：使用箭头函数+import动态加载

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})
复制代码

（2）方案二：使用箭头函数+require动态加载

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }