2021前端vue最新面试题,考试必有！！！

1.什么是vue.js？

1）Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

2）Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

3）Vue 是现在的主流框架之一，现在主流框架有angular、react、vue。

 2.什么是渐进式框架？

现在的框架基本上都是重量级的，里面包含很多方法和模块，但是我们在实际开发的过程中，我们可能用不了所有的方法，我们在开发的过程中，会按照功能分为模块进行开发，根据实际情况选择模块进行导入。

3. 为什么要使用框架？

1) 提高开发的效率

2）让开发者不在操作dom，将更多的精力放置在开发业务上

3）提高渲染的效率

4. vue的特点以及优点？

特点：易用、灵活、高效

优点：

 1） 体积小

 2） 更高的运行效率

 3） 双向数据绑定

 4） 生态系统丰富

5. 声明式编程和命令式编程分别是什么？

声明式编程：

告诉“机器”我们需要什么，那么就会直接出结果 ， 比如 forEach

命令式编程：

 命令“机器”做什么事情，相当于“机器”会按照指示一步一步完成操作, 比如 for 实现效果

6.vue的指令有哪些？ 

指令分为内置指令 和 自定义指令 （指令相当于自定义属性）

 指令的 格式是：  v-

1） v-cloak  解决插值表达式的闪烁问题  （需要添加css样式 [v-cloak]{display:none;}）

  在页面中渲染数据的指令有：  {{}}  v-text  v-html

2）v-text  渲染文本（包含标签）,将标签也当成字符串渲染

3） v-html  渲染文本（不包含标签）,会把标签进行解析，只标签的内容进行展示

4） {{}}  插值表达式   使用方便快捷，但是会产生闪烁问题

5） v-show  控制元素的显示和隐藏  控制样式 display:none

6）v-hide 隐藏内容 同上

7） v-if  控制元素的显示和隐藏  控制dom的移除 和 渲染

8）v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误

9）v-else-if  必须和v-if连用

10） v-for  格式： v-for="（item,index) in/of 数组json" 循环数组或json

11） v-on 绑定事件  简写写法 @

12）  v-on:时间名="执行函数"   

注意 调用执行函数时不加括号，如果执行函数有形参，则第一个形参为事件对象

如果调用执行函数时加括号，但是不传实参，则第一形参为undefined

 实参 $event  代表事件对象

13）v-bind ：绑定属性 ， 使这个属性变为动态属性

14） v-model ：指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素 负责监听用户的输入事件以更新数据

7.v-if和v-show的区别？

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；  如果在运行时条件很少改变，则使用 v-if 较好。

 8.v-text 与{{}}与 v-html 区别？

1）{{}} 将数据解析为纯文本，不能显示输出 html 而v-html 可以渲染输出 html

2）v-text 将数据解析为纯文本，不能输出真正的 html，与花括号的区别是：在页面加载时不显示双花括号，v-text 指令： 操作网页元素中的纯文本内容。{{}}是他的另外一种写法

3）v-text 与{{}}区别： v-text 与{{}}等价，{{}}叫模板插值，v-text 叫指令。

有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出 来，俗称屏幕闪动。

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

可以 ，如果绑定多个事件，可以用键值对的形式 事件类型：事件名；如果绑定是多个相同事

件，直接用逗号分隔就行。

10. 事件修饰符有哪些？

.prevent 阻止默认事件

.stop   阻止冒泡

.self  当直接触发当前元素时，才会触发方法

.once  只触发一次

.capture  触发捕获

.passive 告诉浏览器你不想阻止事件的默认行为。

11.MVVM和MVC的区别？

MVVM是双向数据绑定,vue本身实现了视图和数据的相互监听影响

 m是model  数据层，存储数据

 v是view  视图层  展示数据

vm:是视图模型 viewModel 数据和视图的监听层或调度者 （当数据或者视图发生改变时，vm会监听到，同时会把相应的另外一层跟着改变或者重新渲染）

  数据层改变：vm会帮我们重新渲染视图

  视图层改变：vm会帮我们把数据重新改变，然后重新渲染页面

Mvc 模型视图控制器，视图是可以直接访问模型，所以，视图里面会包含模型信息，mvc

关注的是模型不变，所以，在 mvc 中，模型不依赖视 图，但是视图依赖模型

12.vue的双向数据绑定的原理？

·  Observer遍历数据对象，给所有属性加上setter和 getter，监听数据的变化
·  compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
·  Watcher 订阅者是 Observer和 Compile 之间通信的桥梁，主要做的事情:
在自身实例化时往属性订阅器 (dep)里面添加自己
待属性变动 dep.notice()通知时，调用自身的 update()方法，并触发Compile中绑定的回调

13. Vue2.x 响应式原理？

 vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

14.Vue 首屏加载慢的原因，怎么解决的，白屏时间怎么检测，

怎么解决白屏问题？

首屏加载慢的原因：

第一次加载页面有很多组件数据需要渲染

解决方法：

1.路由懒加载 component：（）=>import(“路由地址”)

2.ui 框架按需加载

3.gzip 压缩

解决白屏问题：

①使用 v-text 渲染数据

②使用{{}}语法渲染数据，但是同时使用 v-cloak 指令（用来保持在元素

上直到关联实例结束时候进行编译），v-cloak 要放在什么位置呢，

v-cloak 并不需要添加到每个标签，只要在 el 挂载的标签上添加就可以

15.Route 与 router 区别？

1）router 是 VueRouter 的一个对象，通过 Vue.use(VueRouter)和 VueRouter 构造函数得到一个 router 的实例对象，这个对象中是一个全 局的对象，他包含了所有的路由包含了许多关键的对象和属性。

2）route 是一个跳转的路由对象，每一个路由都会有一个 route 对象，是

一个局部的对象，可以获取对应的 name,path,params,query 等...

16.Vuex：是什么，怎么使用，在哪些场景使用过?

vuex 就是一个仓库，仓库里放了很多对象。
其中 state 存放的是数据状态，不可以直接修改里面的数据。
getters类似vue的计算属性，主要用来过滤一些数据。
mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。
actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。
一般什么样的数据会放在 State 中呢？
目前主要有两种数据会使用 vuex 进行管理： 1、组件之间全局共享的数据 2、通过后端异步请求的数据 比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态
怎么使用Vuex? 在main.js引入store，注入。新建了一个目录store，… export
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

17.vuex 的 State 特性是？

1)State 就是数据源的存放地 ;State 里面的数据是响应式的，state 中的数据改变，对应这个数据的组件也会发生改变

2)State 通过 mapstate 把全局的 state 和 getters 映射到当前组件的计算

属性中。

18.vuex 的 Getter 特性是？

Getter 可以对 state 进行计算操作，它就是 store 的计算属性 ;Getter 可以在多组件之间复用,

如果一个状态只在一个组件内使用，可以不用 getters。

19.vuex 的 Mutation 特性是？

更改 vuex store 中修改状态的唯一办法就是提交 mutation，可以在回 调函数中修改 store 中的状态。

20.vuex 的 actions 特性是？

Action 类似于 mutation，不同的是 action 提交的是 mutation，不是 直接变更状态，可以包含任意异步操作。

21.vuex 的优势？

优点：解决了非父子组件的通信，减少了 ajax 请求次数，有些可以直接 从 state 中获取

缺点：刷新浏览器，vuex 中的 state 会重新变为初始状态，解决办法是 vuex-along，得配合计算属性和 sessionstorage 来实现。

22.v-for 与 v-if 优先级 ？

在vue2.0版本中，v-for的优先级更高

在vue3.0版本中，v-if的优先级更高

23.vue 在 created 和 mounted 这两个生命周期中请求数据有什么区别呢？

看实际情况，一般在 created（或 beforeRouter） 里面就可以，如果涉及到需要页面加载完

成之后的话就用 mounted。在 created 的时候，视图中的 html 并没有渲染出来，所以此时如

果直接去操作 html 的 dom 节点，一定找不到相关的元素而在 mounted 中，由于此时 html

已经渲染出来了，所以可以直接操作 dom节点，（此时 document.getelementById 即可生效

了）

24.vue的生命周期函数？

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

25.vue中key的作用？

·  key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速。
·  diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异。
·  简单来说，主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，

26.vue中Data，computed和watch的作用和区别？

·  computed是计算属性,具有缓存性。
当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性computed。
用于依赖发生变化时，触发属性重新计算。
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。
·  watch更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props,$emit或者本组件的值,当数据变化时来执行回调进行后续操作。
无缓存性，页面重新渲染时值不变化也会执行。
Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销。
·  应用场景：
当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed。
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。