vue面试题

1. Vue3 首页白屏可能是什么问题引起的，如何解决？

• 资源路径错误
• 路由配置错误（确保路由组件使用动态导入 import() 并正确处理错误）

(排查流程总结)

打开开发者工具，检查 Console 和 Network 面板，定位错误类型

验证配置一致性

检查环境变量，确保生产环境变量已正确定义并注入

2. 谈谈你对 SPA 单页面模式的理解，优缺点？

SPA(Single Page Application，单页应用)是指仅加载一次主页面，后续交互通过动态更新页面内容实现，无需重新加载整个页面的Web应用模式，核心是“在一个页面内完成所有功能交互”。

优点：

a 极致流畅的用户体验，避免页面跳转时的白屏和刷新

b 减少服务器请求压力，仅首次加载时请求完整资源

c 前后端职责清晰

缺点：

a 首屏加载速度慢

b SEO(搜索引擎优化)难度高

c 前进/后退功能需额外处理，SPA自身不记录页面跳转状态，需借助浏览器history API手动管理路由历史

3. 什么是 MVVM，特征，实现思路，解决了什么问题？

MVVM(Model-View-ViewModel)是一种数据驱动的前端架构模式，核心时通过ViewModel将View（视图）与Model（数据模型）解耦，让视图自动响应数据变化，无需手动操作DOM

 

核心特征：

 

a 数据驱动：数据是核心，视图仅作为数据的“映射”，数据变化时视图自动更新，反之视图交互也会同步更新数据

 

b 双向绑定：View与ViewModel之间建立自动关联，无需手动编写DOM操作代码

c 关注点分离：View只负责展示，Model只负责数据存储和业务逻辑，ViewModel作为中间层处理数据转换和交互逻辑，职责清晰

 

实现思路：

 

• 分层定义

 

　　Model: 存储原始数据（如接口返回的JSON、本地状态），仅包含数据和基础业务逻辑（如数据验证）

 

　　View：页面UI结构（如HTML==【模板），通过指令/语法绑定ViewModel中的数据

 

　　ViewModel：核心中间层，一方面监听Model的数据变化，另一方面将数据转换为View可展示的格式，同时处理View的交互事件并同步更新Model

 

• 核心技术支撑：通过数据劫持（如Vue的Object.defineProperty）或虚拟DOM对比（如React的setState）实现数据变化的监听，再触发视图重新渲染

 

解决的核心问题：

 

a 告别繁琐的DOM操作

 

b 降低代码耦合度

 

c 提高开发效率

4. 生命周期有哪些？发送请求在created还是mounted？

 

Vue2.x系统自带有8个

 

beforeCreate、created、beforeMount、mouted、beforeUpdate、updated、beforeDestroy、destroyed

发送请求在created还是mounted中，这个问题具体要看项目和业务的情况，因为组件的加载顺序是，父组件引入子组件，那么先执行父组件的前3个生命周期，再执行子组件的4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要放在mounted中，如果当前组件没有依赖关系，那么放在哪个生命周期中请求都是可以的。

 

5. 一旦进入组件会执行哪些生命周期？

 

beforeCreate、created、beforeMount、mouted

6. 父组件引入子组件，那么生命周期执行的顺序是？

生命周期执行顺序

父：beforeCreate、created、beforeMount

子：beforeCreate、created、beforeMount、mouted

…

父：mouted

7. 在created中如何获取dom

• 只要写异步代码，获取dom是在异步中获取的，就可以了

　　例如：setTimeout、请求、Promise.xxx() 等等

• 使用Vue系统内置的this.$nextTick

8. 为什么发送请求不在beforeCreate里？beforeCreate和created有什么区别？

如果请求是在methods封装好了，在beforeCreate调用的时候，beforeCreate阶段是拿不到methods里面的方法的（会报错）

beforeCreate阶段没有$el也没有$data，拿不到methods的方法

created阶段没有$el但有$data，可以拿到methods的方法

9. 加入keep-alive会执行哪些生命周期？

如果使用了keep-alive组件，当前的组件会额外增加2个生命周期（系统8+2）

activated、deactivated

如果当前组件加入了keep-alive，第一次进入这个组件会执行5个生命周期

beforeCreate、created、beforeMount、mouted、activated

10. 第二次或者第N此进入组件会执行哪些生命周期？

如果当前组件加入了keep-alive，只会执行一个生命周期：activated

如果没有加入keep-alive，会执行4个生命周期：beforeCreate、created、beforeMount、mouted

11. keep-alive

keep-alive是什么：缓存当前组件

12. 你在什么情况下用过哪些生命周期？说一说生命周期使用场景

created =》 单组件请求

mouted =》 同步可以获取DOM；如果子组件请求需要优先于父组件请求

activated =》 判断id是否相等，如果不相等发起请求

destroyed =》 关闭页面记录视频播放的历史，初始化的时候从上一次的历史开始播放

13. 组件传值（通信）的方式

父组件传后代组件：

A. 父组件引入子组件，父组件通过属性绑定传递数据，子组件通过props来接受数据（属性传值）。

这种方式父传子很方便，但是传孙子等后代组件很麻烦，需一级级传递

这种方式，子组件不能修改父组件的数据

B．子组件直接使用父组件的数据

子组件通过：this.$parent.xxx使用父组件的数据

这种方式，子组件可以直接修改父组件的数据

C．依赖注入

优势：父组件可以直接向某个后代组件传值（不需要一级级传值）

后代组件传父组件：

A． 子组件传值给父组件

子组件定义自定义事件 this.$emit （方法传值）

B． 父组件直接拿到子组件的数据

父组件通过：this.$refs.ref名字.xxx使用子组件的数据

兄弟组件传值：

通过新建bus.js文件来做

14. 子组件如何直接修改父组件的值

子组件中可以通过this.$parent.xxx去修改

15. 父组件如何直接修改子组件的值

父组件中可以通过this. $refs.ref名字.xxx去修改

16. 如何找到父组件

this.$parent

17. 如何找到根组件

this.$root

18. provide/inject

provide/inject => 依赖注入

19. $refs

来获取dom的

20. $parent

找到当前组件的父组件，如果找不到，返回自身

21. $root

找到根组件

22. slot/插槽

匿名插槽：没有名字

具名插槽：有名字

作用域插槽：传值。

23. 如何封装组件

组件一定要难点，涉及的知识点：slot、组件通信…

24. Vuex有哪些属性

state => 全局共享属性

getters => 针对于state数据进行二次计算（类似于Vue中的computed）

mutations => 存放同步方法的

actions => 存放异步方法的，并且是来提交mutations

modules => 把vuex再次进行模块之间的划分

25. Vuex使用state值

this.$store.state.xxx

辅助函数：mapState

以上两种方式都可以拿到state的值，那么区别是什么？

使用this.$store.state.xxx，是可以直接修改vuex的state数据的

使用辅助函数形式，是不可以修改的

26. Vuex的getters值修改

this.$store. getters.xxx

辅助函数：mapGetters

getters是不可以修改的

组件使用了getters中的内容，组件使用采用v-model的形式会发生什么？

会报错，报Computed property ‘xxx’ was assigned to but it has no setter

27. Vuex的mutations和actions区别

相同点：mutations和actions都是来存放全局方法的 ，这个全局方法return的值拿不到

区别：mutations => 同步

      actions => 返回的是一个Promise对象，它可以执行相关异步操作

      mutations是用来修改state的值的，actions的作用是来提交mutations

28. Vuex持久化存储

在页面使用了state值：1，然后将1修改成2，然后刷新页面又回到了1，为什么？

Vuex本身不是持久化存储的数据，Vuex是一个状态管理数据（state: 全局属性）=> 就是存放全局属性的地方

实现持久化存储：自己写localStorage；使用vuex-persistedstate插件（需要npm安装）

29. 路由的模式和区别

路由的模式：history、hash

区别：

a 关于找不到当前页面发送请求的问题

history会给后端发送一次请求，而hash不会

b 关于项目打包前端自测问题

hash是可以看到内容，而history默认情况是看不到内容的，需要配置一些其他的额外项

c 关于表现不同

hash：#

history：/

30.