2024年前端最新Vue高频面试题--面试必备（背）_vue面经怎么背(1)，科学技术协会面试题

本文链接：https://blog.youkuaiyun.com/java_dazhuzhu/article/details/138815496

React

介绍一下react
React单项数据流
react生命周期函数和react组件的生命周期
react和Vue的原理，区别，亮点，作用
reactJs的组件交流
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
项目里用到了react，为什么要选择react，react有哪些好处
怎么获取真正的dom
选择react的原因
react的生命周期函数
setState之后的流程
react高阶组件知道吗？
React的jsx，函数式编程
react的组件是通过什么去判断是否刷新的
如何配置React-Router
路由的动态加载模块
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3、请说出vue.cli项目中src目录每个文件夹和文件的用法？

assets 文件夹是放静态资源；
components 是放组件；
router 是定义路由相关的配置;
view 视图；
app.vue 是一个应用主组件；
main.js 是入口文件

4、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。使用 router 对象的 params.id

5、vue-router有哪几种导航钩子？

1、全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2、组件内的钩子；
3、单独路由独享组件

6、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

css 的预编译。使用步骤：
第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass）
第二步：在 build 目录找到 webpack.base.conﬁg.js，在那个 extends 属性中加一个拓展.scss 第三步：还是在同一个文件，配置一个 module 属性
第四步：然后在组件的 style 标签加上 lang 属性，例如：lang=”scss” 有哪几大特性:1、可以用变量，例如（$变量名称=值）；2、可以用混合器；3、可以嵌套

7、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

基于 vue 的前端组件库。npm 安装，然后 import 样式和 js， vue.use（mintUi）全局引入。在单个组件局部引入：import{Toast}from‘mint-ui’。组件一：Toast(‘登录成功’)；组件二：mint-header；组件三：mint-swiper

8、请说下封装 vue 组件的过程？

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。然后，使用 Vue.extend 方法创建一个组件，然后使用
Vue.component 方法注册组件。子组件需要数据，可以在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法

9、vue-loader是什么？使用它的用途有哪些？

解析.vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

10、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

第一步：在 components 目录新建你的组件文件（smithButton.vue），script 一定要 exportdefault
第二步：在需要用的页面（组件）中导入：
importsmithButtonfrom‘…/components/smithButton.vue’
第三步：注入到 vue 的子组件的 components 属性上面,components:{smithButton} 第四步：在 template 视图 view 中使用，
问题有：smithButton 命名，使用的时候则 smith-button。

11、说下你对mvvm的理解？双向绑定的理解？

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双向绑定
双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着变

12、请说下具体使用vue的理解？

1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过
Object.deﬁneProperty() 定义的数据 set、get 函数原理实现。
2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己的工具包就可以开工。项目经理坐等收楼就好。
3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。
4、js 的代码无形的规范，团队合作开发代码可阅读性更高。

13、你是怎么认识vuex的？

1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。
2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。
3、应用级的状态集中放在 store 中；改变状态的方式是提交 mutations，这是个同步的事物；异步逻辑应该封装在 action 中。

14、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

15、vuex的State特性是？

1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象里面的 data。
2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变，依赖这个数据的组件也会发生更新。
3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

16、vuex的Getter特性是？

1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性 2、虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用
3、如果一个状态只在一个组件内使用，是可以不用 getters

17、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

18、的作用是什么？

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

19、vue中ref的作用是什么？

ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册

20、vue中组件直接的通信是如何实现的？

组件关系可分为父子组件通信、兄弟组件通信。
1、父组件向子组件：通过 props 属性来实现
2、子组件向父组件：子组件用（）来触发事件，父组件用on（）来监昕子组件的事件。父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。
3、兄弟之间的通信：通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus，之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

21. vue-cli 工程中常用的 npm 命令有哪些？

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

22. vue-router 路由的两种模式。

hash 模式：
后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。
history 模式：
利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

23. Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及
index.html 初始页面。

24. Vue 如何优化首屏加载速度？

异步路由加载不打包库文件
关闭 sourcemap
开启 gzip 压缩

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图