vue面试题（1）

Posted 2023-04-14

参考技术A 1.css只在当前组件起作用

答：在style标签中写入 scoped 即可 例如：<style scoped></style>

2.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

3.$route和$router的区别

答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

4.vue.js的两个核心是什么？

答：数据驱动、组件系统

5.vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

6.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；

        .stop: 阻止单击事件冒泡；

        .self: 当事件发生在该元素本身而不是子元素的时候会触发；

       .capture: 事件侦听，事件发生的时候会调用

7.v-on 可以绑定多个方法吗？

答：可以

8.vue中 key 值的作用？

答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

9.什么是vue的计算属性？

答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：

①使得数据处理结构清晰；

②依赖于数据，数据更新，处理结果自动更新；

③计算属性内部this指向vm实例；

④在template调用时，直接写计算属性名即可；

⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；

⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

10.vue等单页面应用及其优缺点

答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

注：本文章为网络收集整理

关于前端 Vue 框架面试题，面试可能会被问到哪些？

前言

了解前端的小伙伴，一定知道Vue框架，因为现在市场上Vue框架是目前应用最广泛的框架。基本上很多东西里的框架都是用Vue。所以今天给大家分享Vue框架的面试题，这样在面试的时候也能够有备无患。

Vue框架面试题

Vue框架面试题 内容主要包括：Vue基础知识点，Vue核心知识点，Vue-cli工程，Vue-router，Vuex，http请求，UI样式，常用功能，深入拓展…

Vue基础知识点

1. Vue特性
2. Vue项目结构介绍
3. Vue 常用指令
4. Vue常用的修饰符
5. 条件渲染
6. 列表渲染
7. 组件

Vue核心知识点

1. 对于Vue是一套渐进式框架的理解
2. vue.js的两个核心是什么？
3. 请问 v-if 和 v-show 有什么区别
4. v-for 与 v-if 的优先级
5. v-on可以监听多个方法吗？
6. vue中 key 值的作用
7. vue-cli工程升级vue版本
8. vue事件中如何使用event对象？
9. $nextTick的使用
10. Vue 组件中 data 为什么必须是函数
11. vue中子组件调用父组件的方法
12. vue中 keep-alive 组件的作用
13. vue中如何编写可复用的组件？
14. 什么是vue生命周期？
15. vue生命周期钩子函数有哪些？
16. vue如何监听键盘事件中的按键？
17. vue更新数组时触发视图更新的方法
18. vue中对象更改检测的注意事项
19. 解决非工程化项目初始化页面闪动问题
20. v-for产生的列表，实现active的切换
21. v-model语法糖的组件中的使用
22. vue中自定义过滤器
23. vue等单页面应用及其优缺点
24. 什么是vue的计算属性？
25. vue-cli提供的几种脚手架模板
26. vue父组件如何向子组件中传递数据？
27. vue弹窗后如何禁止滚动条滚动？
28. 计算属性的缓存和方法调用的区别
29. vue-cli中自定义指令的使用

Vue-cli工程

1. 构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
2. vue-cli 工程常用的 npm 命令有哪些？
3. 请说出vue-cli工程中文件夹和文件的用处
4. config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
5. 请你详细介绍一些 package.json 里面的配置

vue-router

1. vue-router 如何响应 路由参数 的变化？
2. 完整的 vue-router 导航解析流程
3. vue-router 有哪几种导航钩子（ 导航守卫 ）？
4. vue-router 传递参数的几种方式
5. 怎么定义 vue-router 的动态路由? 怎么获取传过来的值
6. vue-router 的动态路由匹配
7. vue-router 如何定义嵌套路由？
8. <router-link></router-link> 组件及其属性
9. vue-router 实现路由懒加载（ 动态加载路由 ）
10. vue-router 路由的两种模式
11. history 路由模式配置及后台配置

vuex

1. 什么是 vuex？
2. Vuex 解决了什么问题？
3. 使用 vuex 的核心概念
4. vuex在 vue-cli 中的应用
5. 在 vue 中使用 vuex，修改 state 的值
6. vuex actions 异步修改状态
7. Vuex 中状态储存在哪里，怎么改变它？
8. 怎么在组件中批量使用 Vuex 的 state 状态？
9. 怎么在组件中批量使用 Vuex 的 getter 属性?
10. Vuex 中 action 和 mutation 有什么区别？
11. Vuex 中 action 通常是异步的，那么如何知道 action 什么时候结束呢？
12. Vuex 插件有用过吗？怎么用简单介绍一下？

http请求

1. Promise对象是什么？
2. axios、fetch与ajax有什么区别？
3. 什么是JS的同源策略和跨域问题？
4. 如何解决跨域问题？
5. axios有什么特点？

UI样式

1. vue组件的scoped属性的作用
2. 如何让CSS只在当前组件中起作用？
3. vue-cli中常用的UI组件库
4. 如何适配移动端？
5. 移动端媒体查询
6. vue内容垂直和水平居中
7. vue-cli引入图片的方法
8. 移动端常见样式问题
9. 文本超出隐藏

常用功能

1. vue中如何实现tab切换功能？
2. vue中keep-alive 实现标签页组件缓存
3. vue中实现页面从右往左侧滑入效果
4. vue中父子组件如何相互调用方法？
5. vue中央事件总线的使用

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项目优化，缩短首屏加载时间

篇幅有限，需要文中 《Vue框架面试题总结》完整版（含解析）PDF文档可以【点击这里】免费领取！

深入拓展

1. vue开发命令 npm run dev 输入后的执行过程
2. vue的服务器端渲染
3. webpack的特点