「2022」跳槽涨薪必备面试题及答案——VUE篇（超详细）

敲代码的TKP

已于 2022-07-06 11:02:47 修改

阅读量1.5k

点赞数 6

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-02-22 09:37:15 首次发布

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/123061207

版权

vue 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！

1、vue优点

轻量级
速度快
简单易学
低耦合
可重用性
独立开发
文档齐全，且文档为中文文档

2、vue父组件向子组件传递数据

props

3、子组件向父组件传递事件

$emit

4、v-show和v-if指令的共同点和不同点

相同点:都可以控制dom元素的显示和隐藏
不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面
v-if直接将dom元素从页面删除，再次切换需要重新渲染页面

5、如何让CSS只在当前组件中起作用

scoped

6、keep-alive的作用是什么

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated。使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

7、如何获取dom

给dom元素加ref=‘refname’,然后通过this.$refs.refname进行获取dom元素

8、说出几种vue当中的指令和它的用法

v-model
v-on
v-html
v-text
v-once
v-if
v-show

9、vue-loader是什么？它的用途是什么？

vue-loader是一个 webpack 的加载器，它用来解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理
js可以写es6,style样式可以写scss或less、template可以加jade等
css-loader：加载由vue-loader提取出的CSS代码
vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码
用途:js可以写es6、style样式

10、为什么用key

给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更加迅速。

11、axios及安装？

vue项目中使用ajax时需要axios插件
下载方式cnpm install axios --save

12、v-model的使用

v-model用于表单的双向绑定，可以实时修改数据

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

components存放组件
app.vue主页面入口
index.js主文件入口
assets存放静态资源文件

14、分别简述computed和watch的使用场景

用官网的一句话来说，所有需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景购物车。
如果是一条数据更改，影响多条数据时，使用watch，使用场景搜索框。

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

可以，比如 v-on=“onclick,onbure”

16、$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

17、vue组件中data为什么必须是一个函数？

因为javaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们值负责各自维护数据，不会造成混乱。而单纯的写成对象形式，就是所有组件实例共用了一个data，这样改一个全部都会修改。

18、子组件为何不可以修改父组件传递的 Prop？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

19、vue在双向数据绑定是如何实现的？

vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变
核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法

20、单页面应用和多页面应用区别及缺点

单页面应用（SPA），通俗的说就是指只有一个主页面的应用，浏览器一开始就加载所有的js、html、css。所有的页面内容都包含在这个主页面中。但在写的时候，还是分开写，然后再加护的时候有路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于pc端。
多页面（MPA），就是一个应用中有多个页面，页面跳转时是整页刷新。
单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离，页面效果会比较酷炫。
单页面缺点：不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。初次加载时耗时多；页面复杂度提高很多。

21、Vue 项目中为什么要在列表组件中写 key，其作用是什么？

key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。

更准确
因为带key就不是就地复用了，在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。
更快
利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

22、父组件和子组件生命周期钩子执行顺序是什么？

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程
父 beforeUpdate -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

23、你都做过哪些 Vue 的性能优化？

v-if 和 v-show 区分使用场景
computed 和 watch 区分场景使用
v-for 遍历必须加 key，key最好是id值，且避免同时使用 v-if
大数据列表和表格性能优化 - 虚拟列表 / 虚拟表格
防止内部泄露，组件销毁后把全局变量和时间销毁
图片懒加载
路由懒加载
第三方插件的按需加载
适当采用 keep-alive 缓存组件
防抖、节流的运用

24、vue组件中data为什么必须是一个函数？

因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

25、vue和jQuery的区别

jQuery是使用选择器（ $）选取 D O M 对象，对其进行赋值、取值、事件绑定等操作，其实和原生的 H T M L 的区别只在于可以更方便的选取和操作 D O M 对象，而数据和界面是在一起的。比如需要获取 l a b e l 标签的内容：$ (“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

26、delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组改变了数组的键值。

27、SPA首屏加载慢如何解决

安装动态懒加载所需插件；使用CDN资源。

28、vue项目是打包了一个js文件，一个css文件，还是有多个文件？

根据vue-cli脚手架规范，一个js文件，一个CSS文件。

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

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

30、什么是 vue 生命周期？有什么作用？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新
DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

31、第一次页面加载会触发哪几个钩子？

beforeCreate， created， beforeMount， mounted

32、vue获取数据在一般在哪个周期函数

created
beforeMount
mounted

33、created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

34、vue生命周期的理解总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

35、vuex是什么？有哪几种属性？

vuex是一个专门为vue.js应用程序开发的状态管理模式。

State：状态 vuex存放数据的地方
Getters：获取器 vuex通过现有数据计算出新的数据
Mutations：方法库 vuex的方法库，用来改变数据
Action：动作提交mutation吗，可以包含异步操作
Module：模块将vuex进行分模块

36、Vuex 页面刷新数据丢失怎么解决？

需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件。
推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取storage，而是直接将状态保存至 cookie 或者 localStorage中。

37、vue全家桶

vue-cli、vuex、vueRouter、Axios

38、vue-cli 工程常用的 npm 命令有哪些?

npm install 下载 node_modules 资源包的命令
npm run dev 启动 vue-cli 开发环境的 npm 命令
npm run build vue-cli 生成生产环境部署资源的 npm 命令
npm run build–report 用于查看 vue-cli 生产环境部署资源文件大小的 npm 命令

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

build 文件夹是保存一些 webpack 的初始化配置。
config 文件夹保存一些项目初始化的配置
node_modules 是 npm 加载的项目依赖的模块
src 目录是我们要开发的目录:
assets 用来放置图片
components 用来放组件文件
app.vue 是项目入口文件
main.js 项目的核心文件

40、v-if 和 v-show 有什么区别

共同点：都是动态显示 DOM 元素
区别点：
- v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
- v-show 是通过设置 DOM 元素的 display 样式属性控制显隐
- v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
- v-show 只是简单的基于 css 切换
- v-if 有更高的切换消耗
- v-show 有更高的初始渲染消耗
- v-if 适合运营条件不大可能改变
- v-show 适合频繁切换

41、v-for 与 v-if 的优先级?

v-for 和 v-if 同时使用，有一个先后运行的优先级，v-for 比 v-if 优先级更高，这就说明在 v-for每次的循环赋值中每一次调用 v-if 的判断，所以不推荐 v-if 和 v-for 在同一个标签中同时使用。

42、 vue 常用的修饰符?

事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
v-model 的修饰符
.lazy 通过这个修饰符，转变为在 change 事件再同步
.number 自动将用户输入值转化为数值类型
.trim 自动过滤用户输入的首尾空格
键盘事件修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta
鼠标按钮修饰符
.left
.right
.middle

43、vue 事件中如何使用 event 对象?

获取事件对象，方法参数传递 $event 。注意在事件中要使用 $ 符号

<button @click="Event($event)">事件对象</button>

44、组件传值方式有哪些

父传子：子组件通过props[‘xx’] 来接收父组件传递的属性 xx 的值
子传父：子组件通过 this.$emit(‘fnName’,value) 来传递,父组件通过接收 fnName 事件方法来接收回调
其他方式：通过创建一个bus，进行传值
使用Vuex

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

直接在子组件中通过 this.$parent.event 来调用父组件的方法。
在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了。
父组件把方法传入子组件中，在子组件里直接调用这个方法。

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

在组件中的 style 前面加上 scoped

47、 vue路由跳转

(一)声明式导航router-link

不带参数：

// 注意：router-link中链接如果是'/'开始就是从根路由开始，
//如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">  
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name

带参数：

<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>

(二)this.$router.push()

不带参数：

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

query传参

1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id

params传参

1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id 
script取参:this.$route.params.id

直接通过path传参

1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'}) 
或者：
this.$router.push('/home/123') 
3.获取参数：
this.$route.params.id

params和query的区别
query类似 get，跳转之后页面 url后面会拼接参数，类似?id=1。
非重要性的可以这样传，密码之类还是用params，刷新页面id还在。
params类似 post，跳转之后页面 url后面不会拼接参数。

(三)this.$router.replace()

用法同上，会替换history栈中最后一个记录

(四)this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数
区别:
- this.$router.push 跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面
- this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
- this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数

49、Vue.js 双向绑定的原理

Vue.js 2.0 采用数据劫持（Proxy 模式）结合发布者-订阅者模式（PubSub 模式）的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

Vue.js 3.0, 放弃了Object.defineProperty ，使用更快的ES6原生 Proxy (访问对象拦截器, 也称代理器)

50、Computed和Watch的区别

computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。
watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。
运用场景：
- 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed的缓存特性,避免每次获取值时,都要重新计算。
- 当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API
  ),限制我们执行该操作的频率, 并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
- 多个因素影响一个显示，用Computed；一个因素的变化影响多个其他因素、显示，用Watch;
Computed 和 Methods 的区别
- computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，
- method 调用总会执行该函数

51、过滤器 (Filter)

在Vue中使用filters来过滤(格式化)数据，filters不会修改数据，而是过滤(格式化)数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示。
使用场景：比如需要处理时间、数字等的的显示格式；

52、axios是什么

易用、简洁且高效的http库，支持node端和浏览器端，支持Promise，支持拦截器等高级配置。

53、sass是什么？如何在vue中安装和使用？

sass是一种CSS预编译语言安装和使用步骤如下。

用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
在 webpack.config.js中配置sass加载程序。

54、Vue.js页面闪烁

Vue. js提供了一个v-cloak指令，该指令一直保持在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。用法如下。

	[v-cloak]{ 
	 display:none; 
	} 
	<div v-cloak>{{ title }}</div>

55、虚拟DOM是什么？有什么优缺点？

由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。

优点：
- 1、保证性能下限：框架的虚拟DOM需要适配任何上层API可能产生的操作，他的一些DOM操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的DOM操作性能要好很多，因此框架的虚拟DOM至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
- 2、无需手动操作DOM：我们不需手动去操作DOM，只需要写好 View-Model的
  代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
- 3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
缺点：
- 1、无法进行极致优化：虽然虚拟DOM +
  合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
- 2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

56、vue常用指令

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
v-show 显示内容（同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法
对象型 ‘{red:isred}’
三元型 ‘isred?“red”:“blue”’
数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

57、 $r o u t e 和$ router的区别

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

58、怎样理解 Vue 的单项数据流

数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致你的应用的数据流向难以理解。
注意：在子组件直接用 v-model 绑定父组件传过来的 props 这样是不规范的写法，开发环境会报警告。
如果实在要改变父组件的 props 值可以再data里面定义一个变量，并用 prop 的值初始化它，之后用$emit 通知父组件去修改。

59、Vuex 为什么要分模块并且加命名空间？

模块：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store
对象就有可能会变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的
state、mutation、action、getter、甚至是嵌套子模块。
命名空间：默认情况下，模块内部的 action、mutation、getter是注册在全局命名空间的 — 这样使得多个模块能够对同一mutation 或 action 做出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名的模块。当模块被注册后，他所有 getter、action、及 mutation 都会自动根据模块注册的路径调整命名。

60、vue 中使用了哪些设计模式？

1、工厂模式 - 传入参数即可创建实例
虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
2、单例模式 - 整个程序有且仅有一个实例
vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
3、发布-订阅模式。（vue 事件机制）
4、观察者模式。（响应式数据原理）
5、装饰器模式（@装饰器的用法）
6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。