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

微微的猪食小窝

已于 2022-11-18 23:05:22 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue面试题文章标签： vue.js

于 2022-11-18 22:58:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56366948/article/details/127931129

vue面试题专栏收录该内容

11 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue-Router的懒加载、hash与history模式的区别、路由守卫及Vue 3.0的新特性。探讨了Vuex的原理、action与mutation的差异、与localStorage的区别以及与Redux的比较。强调了Vue的虚拟DOM解析过程、使用key的原因以及为什么不推荐使用index作为key。

四、路由

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很像，区别是什么

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)
   }
  ]
})
复制代码

了解本专栏

超级会员免费看