400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Vue面试题及答案有哪些

这篇文章主要介绍了Vue面试题及答案有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue面试题及答案有哪些文章都会有所收获,下面我们一起来看看吧。

十多年的金山网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都营销网站建设的优势是能够根据用户设备显示端的尺寸不同,自动调整金山建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“金山网站设计”,“金山网站推广”以来,每个客户项目都认真落实执行。

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)}
    ]
})


  

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 层面