118页Vue面试题总结，为面试提前做准备

迷南。 2023-01-05 01:18 128阅读 0赞

> Vue面试题文档内容主要包括**vue-cli工程，vue核心知识点，vue-router，vuex，http请求，UI样式，常用功能，MVVM设计模式，深入拓展。**

## vue-cli工程 ##

#### 1、构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？ ####

**(1)vue.js**：vue-cli工程的核心，主要特点是 双向数据绑定 和 组件系统。

**(2)vue-router**：vue官方推荐使用的路由框架。

**(3)vuex**：专为 Vue.js 应用项目开发的状态管理器，主要用于维护vue组件间共用的一些 变量 和 方法。

**(4)axios**（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http请求，基于 Promise 设计。

**(5) vux等**：一个专为vue设计的移动端UI组件库。

**(6)创建一个emit.js文件**，用于vue事件机制的管理。

**(7) webpack**：模块加载和vue-cli工程打包器。

#### 2、vue-cli 工程常用的 npm 命令有哪些？ ####

下载 node\_modules 资源包的命令：

npm install

启动 vue-cli 开发环境的 npm命令：

npm run dev

vue-cli 生成 生产环境部署资源 的 npm命令：

npm run build

用于查看 vue-cli 生产环境部署资源文件大小的 npm命令：

npm run build --report

#### 3、请说出vue-cli工程中文件夹和文件的用处 ####

**vue-cli目录解析：**

**(1) build 文件夹**：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。

**(2) config 文件夹**：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。

**(3) dist 文件夹**：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。

\*\*(4) node\_modules：存放npm命令下载的开发环境和生产环境的依赖包。

**(5) src**: 存放项目源码及需要引用的资源文件。

**(6) src下assets**：存放项目中需要用到的资源文件，css、js、images等。

**(7) src下componets**：存放vue开发中一些公共组件：header.vue、footer.vue等。

**(8) src下emit**：自己配置的vue集中式事件管理机制。

**(9) src下router**：vue-router vue路由的配置文件。

**(10) src下service**：自己配置的vue请求后台接口方法。

**(11) src下page**：存在vue页面组件的文件夹。

**(12) src下util**：存放vue开发过程中一些公共的.js方法。

**(13) src下vuex**：存放 vuex 为vue专门开发的状态管理器。

**(14) src下app.vue**：使用标签`<route-view></router-view>`渲染整个工程的.vue组件。

**(15) src下main.js**：vue-cli工程的入口文件。

**(16) index.html**：设置项目的一些meta头信息和提供`<div id="app"></div>`用于挂载 vue 节点。

**(17) package.json**：用于 node\_modules资源部 和 启动、打包项目的 npm 命令管理。

#### 4、config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置 ####

**(1) index**：配置打包后入口.html文件的名称以及文件夹名称

**(2) assetsRoot**：配置打包后生成的文件名称和路径

**(3) assetsPublicPath**：配置 打包后 .html 引用静态资源的路径，一般要设置成 “./”

**(4) productionGzip**：是否开发 gzip 压缩，以提升加载速度

***dev 对象下对于开发环境的配置：***

**(1) port**：设置端口号

**(2) autoOpenBrowser**：启动工程时，自动打开浏览器

**(3) proxyTable**：vue设置的代理，用以解决跨域问题

#### 5、请你详细介绍一些 package.json 里面的配置 ####

常用对象解析：

**(1) scripts**：npm run xxx 命令调用node执行的 .js 文件

**(2) dependencies**：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面

**(3) devDependencies**：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面。

![vue-cli工程][vue-cli]

> **CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结**，[点击这里][Link 1]可**免费**领取！

## vue核心知识点 ##

##### 1、对于Vue是一套渐进式框架的理解 #####

##### 2、vue.js的两个核心是什么？ #####

##### 3、请问 `v-if` 和 `v-show` 有什么区别 #####

##### 4、vue常用的修饰符 #####

##### 5、v-on可以监听多个方法吗？ #####

##### 6、vue中 `key` 值的作用 #####

##### 7、vue-cli工程升级vue版本 #####

##### 8、vue事件中如何使用event对象？ #####

##### 9、$nextTick的使用 #####

##### 10、Vue 组件中 data 为什么必须是函数 #####

##### 11、v-for 与 v-if 的优先级 #####

##### 12、vue中子组件调用父组件的方法 #####

##### 13、vue中 `keep-alive` 组件的作用 #####

##### 14、vue中如何编写可复用的组件？ #####

##### 15、什么是vue生命周期？ #####

##### 16、vue生命周期钩子函数有哪些？ #####

##### 17、vue如何监听键盘事件中的按键？ #####

##### 18、vue更新数组时触发视图更新的方法 #####

##### 19、vue中对象更改检测的注意事项 #####

##### 20、解决非工程化项目初始化页面闪动问题 #####

##### 21、v-for产生的列表，实现active的切换 #####

##### 22、v-model语法糖的组件中的使用 #####

##### 23、vue中自定义过滤器 #####

##### 24、vue等单页面应用及其优缺点 #####

##### 25、什么是vue的计算属性？ #####

##### 26、vue-cli提供的几种脚手架模板 #####

##### 27、vue父组件如何向子组件中传递数据？ #####

##### 28、vue弹窗后如何禁止滚动条滚动？ #####

##### 29、计算属性的缓存和方法调用的区别 #####

##### 30、vue-cli中自定义指令的使用 #####

![Vue核心知识点][Vue]

### vue-router ###

##### 1、vue-router如何响应 路由参数 的变化？ #####

##### 2、完整的 vue-router 导航解析流程 #####

##### 3、vue-router有哪几种导航钩子（ 导航守卫 ）？ #####

##### 4、vue-router传递参数的几种方式 #####

##### 5、vue-router的动态路由匹配 #####

##### 6、vue-router如何定义嵌套路由？ #####

##### 7、`<router-link></router-link>`组件及其属性 #####

##### 8、vue-router实现路由懒加载（ 动态加载路由 ） #####

##### 9、vue-router路由的两种模式 #####

##### 10、history路由模式配置及后台配置 #####

![vue-router][]

> **CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结**，[点击这里][Link 1]可**免费**领取！

### vuex ###

##### 1、什么是vuex？ #####

##### 2、使用vuex的核心概念 #####

##### 3、vuex在vue-cli中的应用 #####

##### 4、在vue中使用vuex，修改state的值 #####

##### 5、vuex actions异步修改状态 #####

![vuex][]

### http请求 ###

##### 1、Promise对象是什么？ #####

##### 2、axios、fetch与ajax有什么区别？ #####

##### 3、什么是JS的同源策略和跨域问题？ #####

##### 4、如何解决跨域问题？ #####

##### 5、axios有什么特点？ #####

![http请求][http]

### UI样式 ###

##### 1、`.vue组件的scoped属性`的作用 #####

##### 2、如何让CSS只在当前组件中起作用？ #####

##### 3、vue-cli中常用的UI组件库 #####

##### 4、如何适配移动端？【 经典 】 #####

##### 5、移动端媒体查询 #####

##### 6、vue内容垂直和水平居中 #####

##### 7、vue-cli引入图片的方法 #####

##### 8、移动端常见样式问题 #####

##### 9、文本超出隐藏 #####

![UI样式][UI]

### 常用功能 ###

##### 1、vue中如何实现tab切换功能？ #####

##### 2、vue中keep-alive 实现标签页组件缓存 #####

##### 3、vue中实现页面从右往左侧滑入效果 #####

##### 4、vue中父子组件如何相互调用方法？ #####

##### 5、vue中央事件总线的使用 #####

![常用功能][90d07e878f51d9fbf6b3e99a518f5631.png]

### MVVM设计模式 ###

##### 1、MVC、MVP与MVVM模式 #####

##### 2、MVC、MVP与MVVM的区别 #####

##### 3、MVVM的实现原理 #####

##### 4、Object.defineProperty()方法 #####

##### 5、 ES6中定义的类和对象 #####

##### 6、JS中的文档碎片 #####

##### 7、解构赋值 #####

##### 8、Array.from #####

##### 9，Array.reduce #####

##### 10、递归的使用 #####

##### 11、Obj.keys()与Obj.defineProperty #####

##### 12、发布-订阅模式 #####

##### 13、vue项目优化，缩短首屏加载时间 #####

![MVVM设计模式][MVVM]

### 深入拓展 ###

##### 1、vue开发命令 npm run dev 输入后的执行过程 #####

##### 2、vue的服务器端渲染 #####

##### 3、从零写一个npm安装包 #####

##### 4、vue-cli中常用到的加载器 #####

##### 5、webpack的特点 #####

![深入拓展][5dd0ef2c2fc4951577e27bed8e994a1a.png]

> **结语**：需要前端学习资料或者想要学习前端的小伙伴可以加入前端裙：**953 352 883** 一起交流学习，**CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题总结**，都可以免费获取！

[vue-cli]: /images/20221119/306795b2f3884ba3b04f3f817b600626.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=MeJaYZqR
[Vue]: https://img-blog.csdnimg.cn/img_convert/2e7f527a2eaef5ce663e701b1df5de6f.png
[vue-router]: https://img-blog.csdnimg.cn/img_convert/7815db84ab265df4aac498530cd9ba12.png
[vuex]: https://img-blog.csdnimg.cn/img_convert/2b4056abf117124237c99429d881a422.png
[http]: https://img-blog.csdnimg.cn/img_convert/c4d2dece474d9a0fb3283c6b535eb7e9.png
[UI]: https://img-blog.csdnimg.cn/img_convert/8a5d5001f094ac1cfa00a8984d446e8f.png
[90d07e878f51d9fbf6b3e99a518f5631.png]: https://img-blog.csdnimg.cn/img_convert/90d07e878f51d9fbf6b3e99a518f5631.png
[MVVM]: https://img-blog.csdnimg.cn/img_convert/462b0517a34ab799b89146c8cfa78d6a.png
[5dd0ef2c2fc4951577e27bed8e994a1a.png]: https://img-blog.csdnimg.cn/img_convert/5dd0ef2c2fc4951577e27bed8e994a1a.png