• 技术文章 >web前端 >Vue.js

    【整理汇总】45+个Vue面试题,带你巩固知识点!

    青灯夜游青灯夜游2023-01-12 21:02:34转载175

    本篇文章给大家总结分享一些Vue面试题(附答案解析),带你梳理基础知识,增强Vue知识储备,值得收藏,快来看看吧!

    1. 简述 Vue 生命周期

    答题思路:

    回答范例:

    2. Vue 中如何做权限管理

    自己的话:权限管理一般分页面权限和按钮权限,而具体实现方案又分前端实现和后端实现,前端实现就是会在前端维护一份动态的路由数组,通过用户登录后的角色来筛选它所拥有权限的页面,最后通过 addRoute 将动态添加到 router 中;而后端实现的不同点就是这些路由是后端返回给前端,前端再动态添加进去的。 按钮权限一般会实现一个 v-permission ,通过判断用户有没有权限来控制按钮是否显示。 纯前端方案的优点是实现简单,但是维护问题大,有新的页面和角色需求都需要改代码重新打包部署,服务端则不存在这个问题。

    3. Vue 中双向绑定的使用和原理

    回答思路:

    回答:

    4. Vue 组件之间通信有哪些?

    Vue 组件之间通信有以下这么几种:

    以上的方法长按使用场景可以分为:

    5.你了解哪些 Vue 性能优化方法?

    const router = createRouter({
        routes: [
            { path : '/foo', component: () => import('./foo.vue)}
        ]
    })
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive == true"></router-view>
    </keep-alive>
    <router-view v-if="$route.meta.keepAlive != true"></router-view>

    6. 刷新后 Vuex 状态丢失怎么解决?

    思路:

    回答:

    对应第一个问题我的解决方法是可以通过 监听 storage 事件来清除数据

    window.addEventListener("storage", function () {
        localStorage.clear();
        window.location.href = '/login'
        console.error("不要修改localStorage的值~~~");
    });

    对于第二个问题没办法了,只能选择不适用 MapSet 这种引用类型。

    7. Vue3 为什么用 Proxy 替代 defineProperty ?

    思路:

    回答:

    8. 怎么实现路由懒加载?

    思路:

    回答:

    {
      path: '/login',
      component: () => import('../views/login/Login.vue')
    },
    {
      path: '/login',
      component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
    },

    vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件

    9. history模式 和 hash 模式有何区别?

    10. 说说 nextTick 的使用和原理?

    11. v-for 和 v-if 优先级

    先回答答案:vue2 中, v-for 的优先级更高 但是在 vue3 中, v-if 的优先级更高

    拓展:无论什么时候,我们都不应该把 v-forv-if 放在一起, 怎么解决呢?一是可以定义一个计算属性,让 v-for 遍历计算属性。二是可以把 if 移到内部容器里(ul ol)或者把v-for移植外部容器(template)中

    vue2文档vue3文档

    12. 如何监听 Vuex 状态变化?

    watch 方式,可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数,回调函数接受mutation 对象和 state 对象,可以通过 mutation.type 判断监听的目标。 wtach 方法更简单好用, subscribe 会略繁琐,一般用 vuex 插件中(可以提一下vuex的持久化插件vuex-persistvuex-persistedstate

    13. 你觉得 Vuex 有什么缺点?

    vue3 + pinia 会是更好的组合。

    14. ref 和 reactive 异同点?

    16. Vue 中如何扩展一个组件?

    mixins 很灵活,但是会冲突很混乱。extends 是一个不太常用的选项,更 mixins 的不同是它只能扩展单个对象,优先级比 mixins 高。

    混入的数据和方法 不能明确判断来源 而且可能和当前组件内变量 产生命名冲突,composition api 可以很好解决这些问题,利用独立出来的响应式模块可以很方便的编写独立逻辑并提供响应式数据局,增强代码的可读性和维护性。

    扩展:Vue.mixin(全局混入) Vue.extend(有点像是 类/组件的继承 创建一个子类)

    17. vue-loader 是什么?

    18. 子组件能否修改父组件数据

    不能直接改。

    组件化开发中有一个单向数据流原则,不在子组件修改父组件数据是个常识

    如果你确实需要改,请通过emit向父组件发送一个事件,在父组件中修改

    19. 怎么定义动态路由,怎么获取传过来的动态参数?

    我么可以在路径中使用一个动态字段来实现,例如/users/:id 其中 :id 就是路径参数。 可以通过 this.$route.parmas获取,参数还可以有多个, $route 对象还公开了其他有用的信息如 query hash等。

    20. 说说对 Vue 数据响应式的理解

    思路:

    回答:

    21. 从 template 到 render 做了什么

    templaterender 的过程其实是问的 vue 编译器 工作原理。

    思路:

    回答:

    22. 如何缓存和更新组件

    23. 虚拟DOM

    24. 什么是异步组件

    25. 说说Vue长列表优化思路

    26. computed & watch

    27. SPA 和 SSR的区别是什么?

    28. diff 算法

    回答思路:

    回答:

    29. 如何从0到1架构一个Vue项目,说说有哪些步骤,插件,目录结构怎么组织

    + |- /src
    +   |- /assets 存放资源
    +     |- /img   
    +     |- /css   
    +     |- /font   
    +     |- /data   
    +   |- base-ui  存放多个项目中都会用到的公共组件
    +   |- components 存放这个项目用到的公共组件
    +   |- hooks 存放自定义hook
    +   |- views 视图
    +   |- store 状态管理
    +   |- router 路由
    +   |- service 网络请求
    +   |- utils 工具
    +   |- global 全局注册、全局常量..

    30. 你如何实现一个Vue-Router

    一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新,同时路由还需要已插件形式存在,所以:

    31. 什么情况需要使用Vuex模块?

    32. vue 组件为什么只能有1个根节点

    33. v-once 使用场景有哪些?

    补充:

    34. 什么场景使用嵌套路由

    如果你说不出来,可以直接举例子。当我开发一个页面时,如果需要显示一个顶部导航栏,通过导航栏跳转到不同的页面,而顶部的导航栏又必须要在每个页面显示时,就可以使用嵌套路由;还可以举例,当我需要查看某个列表的详情页面时,往往需要嵌套路由 (detail/:id

    35. 如何监听 Vuex 状态变化?

    watch 方式,可以以字符串形式监听 $store.state.xx; subscribe 方法参数是一个回调函数,回调函数接受mutation 对象和 state 对象,可以通过 mutation.type 判断监听的目标。 wtach 方法更简单好用, subscribe 会略繁琐,一般

    36. Vue 实例挂载过程发生了什么?

    37. key 的作用

    38. watch 和 watchEffect

    39. 父子组件创建、挂载顺序

    parent created -> child created -> child mounted -> parent mounted

    原因:Vue 创建是一个递归的过程,先创建父组件有子组件就会创建子组件,因此创建时先有父组件再有子组件;子组件首次创建时会添加 Mounted 钩子到队列,等到 patch 结束再执行它们,可见子组件的 mounted 钩子是选进入到队列中的,因此等到 patch 结束执行这些钩子时也先执行。

    40. 说说你对 Vuex 的理解

    41. 什么是递归组件?使用场景有哪些?

    42. 你写过自定义指令吗?

    使用自定义指令分为定义、注册、和使用

    43. Vue3新特性

    API 层面

    此外,Vue3在框架层面也有很多两点和改进

    44. Vue3设计目标和优化点

    最大设计目标就是替代 Vue2,为了实现这一点,Vue3 在以下几个方面做了很大改进,如:易用性,框架性能、扩展性、可维护性、开发体验等

    45. Vue3性能提升体现在哪些方面?

    46. $attrs$listeners 是做什么的?

    $attrs 获取没有在 props 中定义的属性,v-bind="$attrs" 可以用于属性透传$listeners 用于获取事件,vue3 中已经移除合并到 attrs 中,使用起来更方便

    47. Composition API 和 Option API 有何不同?

    Composition API 是一组API,包括 Reactivity API、生命钩子、依赖注入,使用户可以通过导入函数方式编写组件,而 Options API 则通过声明组件选项的对象形式编写组件。

    Composition API 更简洁、逻辑复用更高效。解决的过去 Options APImixins 的各种缺点(会冲突很混乱);另外 Composition API 更自由,没有 Options API 那样固定的写法,并且可以更有效的将逻辑代码组织在一起,而不用东一块西一块搞得很混乱,最后 Composition API 拥有更好的类型推断,对 ts 支持友好。

    48. 你知道哪些 Vue 最佳实践

    编码风格方面:

    性能方面:

    49. mutation 和 action 的区别?

    mutation 用于修改 stateaction 用于提交一个 mutation,而且 action 可以包含异步操作

    50. 如何从0实现vuex

    实现 Store,可以定义 Store 类,构造函数接受选项 options,设置属性 state 对外暴露状态,提供 commitdispatch 修改属性。这里需要设置 state 为响应式对象,同时将 Store 定义为一个 Vue 插件(install方法)。

    commit 可以获取用户传入 mutations 并执行它,这样可以按用户提供的方法修改状态,dispatch 类似,但是 dispatch 需要返回一个 Promise 给用户用于处理异步结果。

    (学习视频分享:vuejs入门教程编程基础视频

    以上就是【整理汇总】45+个Vue面试题,带你巩固知识点!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:面试题 Vue.js
    上一篇:聊聊Vue3+hook怎么写弹窗组件更快更高效 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • vue动态路由有哪两种实现方法• 一文详解项目中怎么根据vue版本进行差异化处理• Vue3这样写列表页,让性能更好更高效!• 【由浅入深】vue组件库实战开发总结分享• 聊聊Vue3+hook怎么写弹窗组件更快更高效
    1/1

    PHP中文网