前端vue 面试大全

╰+哭是因爲堅強的太久メ 2022-11-12 02:37 278阅读 0赞

## 一、vue常用指令： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]

## 二、v-if与v-show的区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]

## 三、生命周期共有几个？分别在什么时候使用？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]

## 四、Vue中双向数据绑定是如何实现的 ##

![在这里插入图片描述][20210322111048687.png]

## 五、Object.defineProperty() ##

![在这里插入图片描述][20210322111159340.png]

## 六、简述虚拟DOM + diff算法\*\* ##

![在这里插入图片描述][20210322111617144.png]

## 七、Vue组件通信(父传子、子传父、兄弟通信) ##

父传子、子传父、兄弟通信（bus）、本地存储、vuex

## 八、什么是vuex? ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]

## 九、vue监听和深度监听watch ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]

## 十、vue中Computed、Methods、Watch区别 ##

![在这里插入图片描述][20210322112654590.png]

## 十一、简述MVVM和MVC\*\* ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]

## 十二、vue中如何自定义指令directive ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]

## 十三、vue之filter ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]

## 十四、Vue-router共有几种模式？默认是哪种？ ##

history模式 hash模式 默认 hash模式

## 十五、vue脚手架本地开发跨域请求设置 ##

在根目录创建`vue.config.js`  
在module.exports中配置devserver的内容

## 十六、vue使用keep-alive缓存页面优化项目 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]

## 十七、v-for中为何要使用key ##

![在这里插入图片描述][20210322113107423.png]

## 十八、vue中的slot（插槽） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]

## 十九、NextTick是什么 ##

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

## 二十、图片懒加载原理 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]

## 二十一、前端优化中的路由懒加载 ##

![在这里插入图片描述][20210322113431761.png]

## 二十二、函数防抖和函数节流 ##

![在这里插入图片描述][20210322113521328.png]

## 二十三、axios封装与api接口管理 ##

![在这里插入图片描述][20210322113612742.png]

## 二十四、渐进式框架的理解 ##

***Vue是一个MVVM的渐进式框架，，渐进式指的是先使用Vue的核心库，然后再根据需求逐渐增加所需要的插件，慢慢的组织成自己的项目，  
我们在使用过程中主张最小化，Vue没有强主张，插件使用比较灵活，也就是没有做职责之外的事。***

## 二十五、单页面应用和多页面应用区别及优缺点 ##

***单页面应用：  
优点：跳转速度快  
缺点：首屏加载慢  
多页面应用：  
有点：首屏加载快  
缺点：跳转的效率不高***

## 二十六、组件特性及好处 ##

***1. 组件系统Vue中核心的特性之一，组件化可以让我们实现html代码块的结构重复利用  
 2. 组件化开发能大幅度提高应用开发效率、测试性、复用性  
 3. 组件数据通信遵循单项数据流，高内聚，低耦合。  
总的来说，组件可以让页面的结构更新清晰直观，业务逻辑关系更加明确，***

## 二十七、组件的基本组成 ##

***vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style***

## 二十八、Props验证类型都有哪些 ##

***Boolean 布尔类型  
String 字符串类型  
Number 数字类型  
Array 数组  
Function 方法  
Object 对象  
Symbol***

## 二十九、为什么要是用脚手架 ##

***Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架  
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦***

## 三十、Vue-cli中如何使用sass ##

***安装node-sass和sass-loader的方法  
cnpm install node-sass@4.14.1 --save  
cnpm install sass-loader@7.3.1 --save***

组件内的标签使用

## 三十一、Vue-cli打包命令是什么？打包后会导致路径问题，应该在哪里修改（面试真题） ##

\*\*\*npm run build -环境 -域名 -打包文件夹 -平台  
打包后会项目中生成一个dist文件夹  
在打包之前，需要将文件中config文件夹下的index.js中的 assetsPublicPath:"" 中的 / 改为 ./  
\*\#\# 三十二、params和query的区别？  
\****1.用法上的  
刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this. route.query.name和this.route.params.name  
2.展示上的  
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示  
3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系***

## 三十三、重定向用哪个属性？ ##

***redirect属性***

## 三十四、assets和static的区别（面试真题） ##

***assets目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录，如果接口中的文件，不能放到assets中去。  
static目录中的文件直接拷贝到打包好的目录中 不会进行压缩， 放第三方的json文件或者图片***

## 三十五、路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？ ##

***router.beforeEach() 全局路由守卫的钩子函数，可以写到main.js中  
beforeRouteEnter 进入组件之前触发方法  
beforeRouteUpdate 组件参数更新的时候触发  
beforeRouteLeave 离开组件的时候触发的钩子函数  
to 即将要进入页面的路由信息  
from 离开页面路由信息  
next 是否继续进入进入路由 next(false)阻止进入 next()继续进入路由地址***

## 三十六、简述拦截器是什么，共有几个拦截点，分别是什么 ##

***拦截器axios发送出去请求或者数据响应回来之前进行数据的拦截或者过滤  
主要有请求拦截器 请求发送出去之前拦截  
响应拦截器 数据响应回来后触发  
比如页面loading效果结合拦截器+vuex完成。***

## 三十七、简述axios并发请求 ##

***axios我们可以通过all方法完成并发请求，  
在 .then中通过axios.spread拿到all中请求回来数据，在进行数据操作即可***

## 三十八、详述Vuex运行机制 ##

***在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中***

## 三十九、vuex中如何异步修改数据 ##

***通过dispatch调用actions中的方法，再通过commit提交调用mumations中的方法，修改state数据达到修改数据目的***

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70]: /images/20221022/55ee2dea3db44bdb9a323d8fb9b2ecec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 1]: /images/20221022/7e1c2a9f4f7f47b4a8bcc21cf5bf9026.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 2]: /images/20221022/b9b58a1f1eb14d2e811d5385153c2ee5.png
[20210322111048687.png]: /images/20221022/11e50da4f5bb4921835c04c9789572ab.png
[20210322111159340.png]: /images/20221022/25461df1368c4730b7f54e74278cb504.png
[20210322111617144.png]: /images/20221022/e8bc789669a84eed8617966299cccc12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021032211190010.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210322112647275.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322112654590.png]: https://img-blog.csdnimg.cn/20210322112654590.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/202103221127001.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021032211270699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210322112926468.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2021032211310255.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322113107423.png]: https://img-blog.csdnimg.cn/20210322113107423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/2021032211325311.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210322113335541.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpbmJpbmJveA==,size_16,color_FFFFFF,t_70
[20210322113431761.png]: https://img-blog.csdnimg.cn/20210322113431761.png
[20210322113521328.png]: https://img-blog.csdnimg.cn/20210322113521328.png
[20210322113612742.png]: https://img-blog.csdnimg.cn/20210322113612742.png