vue面试题

jjw_zyfx

已于 2024-10-13 20:15:04 修改

阅读量383

点赞数

分类专栏：前端 vue 面试题文章标签： vue

于 2020-04-27 17:01:55 首次发布

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/104678255

版权

前端同时被 3 个专栏收录

313 篇文章 2 订阅

订阅专栏

vue

155 篇文章 2 订阅

订阅专栏

面试题

3 篇文章 0 订阅

订阅专栏

判断一个对象的方法

1、instanceof 和 typeof 包括但不限于这两个

2、使用constructor方法

3、.isArray(obj)

4、利用tostring()方法，这个方法是最佳的方案。

js中判断对象数据类型的方法 - jack_Meng - 博客园

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、webpack：模块加载和vue-cli工程打包器。
6、eslint代码规范工具

构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？_请简述构建 vue-cli 工程都用到了哪些技术?他们的作用分别是什么?-CSDN博客

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

1. npm install：下载 node_modules 资源包的命令

2. npm run dev：启动 vue-cli 开发环境的 npm命令

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

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

vue-cli 工程常用的 npm 命令有哪些？_vue-cli npm常用命令-CSDN博客

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

dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
src文件夹：存放项目源码及需要引用的资源文件。
src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法。
src-common文件夹：stylus的混合文件.styl，不要写到public也可以
src-components文件夹：存放vue开发中抽离的一些公共组件。
src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
src-pages文件夹：涉及到路由的组件
src-router文件夹:vue-router，路由器及路由的配置
src-store文件夹：存放 vue中的状态数据，用vuex集中管理
App.vue文件：使用标签渲染整个工程的.vue组件。
main.js文件：vue-cli工程的入口文件。
package.json文件：
用于 node_modules资源部和启动、打包项目的 npm 命令管理。

『vue-cli知识点』-Vue-cli工程中每个文件夹和文件的用处_services vue一般存放什么-CSDN博客

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

webpack config文件配置在生产环境/开发环境下使用不同的API接口_configurewebpack api-CSDN博客

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

7.请你详细介绍一些 package.json 里面的配置 · 语雀

vue核心知识点

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

对于Vue是一套渐进式框架的理解 - 乡乡 - 博客园

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

1、数据驱动，也叫双向数据绑定。

2、组件系统。

2.1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。
2.2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。
2.3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。
2.4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。
2.5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版2.本对于生命周期函数名称改动很大。
2.6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。
等等。

对于Vue是一套渐进式框架的理解 - 乡乡 - 博客园

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

两个都是让元素不可见。但是两个选项有区别

v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

项目中如何使用？

当初始条件为假时，v-show初始渲染开销较高,使用v-if
当我们频繁切换开关是，v-if切换开销较高,使用v-show
多路分支，只能选择v-if
具体看开发项目的时候是否频繁操作DOM

vue中v-if和v-show有什么区别？ - 码上出彩 - 博客园

4、vue常用的修饰符

v-model修饰符

.lazy

.trim

.number

二、事件修饰符

.stop

.prevent

.once

.keyCode

.sync

.capture

vue中常用修饰符 - 小刺猬的大宝贝 - 博客园

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

v-on可以监听多个方法

v-on可以监听多个方法吗？ - gitByLegend - 博客园

6、vue中 `key` 值的作用

key值：用于管理可复用的元素。因为Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。

vue中 key 值的作用_key值是什么意思啊-CSDN博客

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

https://www.cnblogs.com/sundaysandroid/p/13861848.html

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

vue学习笔记：事件中的$event对象作用_$event的作用-CSDN博客

9、$nextTick的使用

1、在生命周期created()中进行的dom操作一定要放到nextTick()的回调函数中。
2、在数据变化后要执行某个操作，而这个操作需要使用随数据变化而变化的dom结构时，这个操作都应该放进nextTick()的回调函数中。

vue中$nextTick的用法 - 简书

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

在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

vue 组件中的 data 为什么必须是函数_vue data函数-CSDN博客

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

vue2 中当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级, vue3反过来

v-for与v-if的优先级 - gitByLegend - 博客园

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

1、第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

2、第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

3、第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

https://www.cnblogs.com/jin-zhe/p/9523782.html

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

在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

vue中keep-alive的作用 - 简书

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

在编写组件的时候，时刻考虑组件是否可复用是有好处的。一次性组件跟其他组件紧密耦合没关系，但是可复用组件一定要定义一个清晰的公开接口。

Vue.js组件 API 来自三部分：prop、事件、slot：

prop 允许外部环境传递数据给组件，在vue-cli工程中也可以使用vuex等传递数据。
事件允许组件触发外部环境的 action
slot 允许外部环境将内容插入到组件的视图结构内。

vue中如何编写可复用的组件？ - 大橙橙 - 博客园

15、什么是`vue生命周期`和`生命周期钩子`函数？

vue 的生命周期是： vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

什么是vue生命周期和生命周期钩子函数？ - 大橙橙 - 博客园

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

什么是vue生命周期和生命周期钩子函数？ - 大橙橙 - 博客园

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

@keyup.enter="submit"

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
修饰键：

.ctrl
.alt
.shift
.meta

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件

Vue如何监听键盘事件中的按键_vue监听键盘事件 alt+x-CSDN博客

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

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组：

例如：filter(), concat()和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用这些非变异方法时，可以用新数组替换旧数组：

vue更新数组时触发视图更新的方法 - 大橙橙 - 博客园

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

Vue中改变对象的注意事项 - 小丸子的城堡 - 博客园

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

vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

解决非工程化项目初始化页面闪动问题 - gitByLegend - 博客园

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

单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点和缺点：
优点：

1、用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小。

2、前后端分离，比如vue项目

3、完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；

缺点：

1、首次加载页面的时候需要加载大量的静态资源，这个加载时间相对比较长。

2、不利于 SEO优化，单页页面，数据在前端渲染，就意味着没有 SEO。

3、页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

vue等单页面应用及其优缺点-CSDN博客

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

什么是vue的计算属性？ - 大橙橙 - 博客园

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

vue蓄力5：vue-cli提供的几种脚手架模板有哪些，区别是什么_什么是vue-cli项目模板-CSDN博客

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

http://baijiahao.baidu.com/s?id=1641978612045935944&wfr=spider&for=pc

28、vue-cli开发环境使用全局常量

开发环境的全局常量定义在.env里，
生产环境的全局常量定义在.env.production里，

百度安全验证

29、vue-cli生产环境使用全局常量

https://zhidao.baidu.com/question/2144742060541309308.html

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

https://blog.csdn.net/weixin_30622181/article/details/97082147

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

vue计算属性的缓存和方法调用的有什么区别？ - 维维WW - 博客园

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

vue-cli中自定义指令的使用 - duqianqian - 博客园

vue-router

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

https://blog.csdn.net/weixin_40013817/article/details/102799023

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

https://zhuanlan.zhihu.com/p/99199175

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

vue-router有哪几种导航钩子（导航守卫）？ - 大橙橙 - 博客园

4、vue-router的几种实例方法以及参数传递

vue-router的几种实例方法以及参数传递 - duqianqian - 博客园

5、vue-router的动态路由匹配以及使用

带参数的动态路由匹配 | Vue Router

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

vue之vue-router嵌套路由 - iveBoy - 博客园

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

Vue中router-link及其属性介绍_vue中route-link-CSDN博客

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

10.vue-router实现路由懒加载（动态加载路由） - 大牛半路出家 - 博客园

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

vue-router两种模式的区别 - cecelia - 博客园

10、history路由模式与后台的配合

vue路由的两种模式配置以及history模式下面后端如何配置 - 开源 - 博客园

vuex

1、什么是vuex？

Vuex 是什么？ | Vuex

2、使用vuex的核心概念

vuex的核心概念和使用方法_前端vuex概念-CSDN博客

3、vuex在vue-cli中的应用

在vue-cli项目里使用vuex,vuex的详细使用 - 鳳舞九天 - 博客园

4、组件中使用 vuex 的值和修改值的地方？

在组件中 this.$store.commit

在action中 store.commit

在vue中使用vuex，修改state的值_在vue中如何更改vuex中的state值-CSDN博客

5、在vuex中使用异步修改

vue六十三：vuex的异步处理 - 向前走。 - 博客园

6、pc端页面刷新时实现vuex缓存

解决vuex数据页面刷新后初始化问题_vuex中states初始化失败-CSDN博客

http请求

1、Promise对象是什么？

Promise 对象代表一个异步操作，有三种状态：

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

Promise 优缺点

有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise.all  
Promise.race

JavaScript Promise 对象 | 菜鸟教程

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

一个简单的 http 请求

let xhr = new XMLHttpRequest();
xhr.open('GET', '/url', true);
xhr.send();

axios、fetch 和 ajax 等的区别详解 - bala001 - 博客园

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

也谈谈同源策略和跨域问题 - 小小公举 - 博客园

4、如何解决跨域问题？

也谈谈同源策略和跨域问题 - 小小公举 - 博客园

5、vue-cli中如何使用JSON数据模拟？

详解vue-cli中模拟数据的两种方法_vue.js_脚本之家

6、vue-cli中http请求的统一管理。

Vue项目中的http请求统一管理-CSDN博客

7、axios有什么特点？

1.从浏览器中创建XMLHttpRequests
2.node.js创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动换成json
axios中的发送字段的参数是data跟params两个
两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求
data一般适用于post put 请求

axios特点_axios特性-CSDN博客