文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue面试题及答案有哪些

2023-07-04 22:54

关注

这篇文章主要介绍了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('../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 给用户用于处理异步结果。

关于“Vue面试题及答案有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue面试题及答案有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯