vue面试题

1.Vue中的data为什么是一个函数?

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据)

Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。

2.请说说Vue中的响应式原理？

vue响应式也叫作数据双向绑定，大致原理阐述：

首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。

此外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上添加监听，添加input事件监听，每当input事件被触发时，就修改对应的data。

3.说说你对Vue中过滤器的理解？如何使用？有哪些使用场景？

过滤器（filter）是输送介质管道上不可缺少的一种装置

大白话讲就是把一些不必要的东西过滤掉

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数

Vue 允许你自定义过滤器，可被用于一些常见的文本格式化

vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：

（1）定义filter

在组件的选项中定义本地的过滤器

（2）定义全局过滤器

当全局过滤器和局部过滤器重名时，会采用局部过滤器

过滤器函数总接收表达式的值(之前的操作链的结果) 作为第一个参数。

应用场景:

平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化之类的等

4.说说你对Vue中diff算法的理解

diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化操作DOM结构，能够最大程度上减少浏览器重绘与回流的规模。

5.Vue中A组件是B组件的父组件，A组件更新，请说一下A，B组件各执行了哪些生命周期函数？

父beforeUpdate --> 子beforeUpdate --> 子updated --> 父updated

6.Vue的路由和express的路由有什么区别？

1、express的router是属于后端的，Vue的router是属于前端的

2、服务端渲染时，express的router把数据和模板传给模板引擎的；客户端渲染时，

通过路由去获得静态页面，浏览器发送http请求向服务端获取数据，Vue router是不需要传数据的。

7.说说你对Vue中slot的理解，应用场景有哪些？

理解：

“Vue实现了一套内容分发的API，这套API基于当前的Web Components规范草案，将slot元素作为承载分发内容的接口”。

slot的意思是插槽，Vue使用slot的作用是做内容分发。所谓的内容分发其实就是将父组件的内容放到子组件指定的位置叫做内容分发。

应用场景：

通过插槽让用户可以拓展组件，去更好地复用组件和对其做定制化处理

如果父组件在使用到一个复用组件的时候，获取这个组件在不同的地方有少量的更改，如果去重写组件是一件不明智的事情

通过slot插槽向组件内部指定位置传递内容，完成这个复用组件在不同场景的应用

比如布局组件、表格列、下拉选、弹框显示内容等

8.简单说一下Vue中diff算法？如何理解

①diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作为对比（即diff),将变化的地方更新在真实DOM上，另外，也需要将diff高效的执行对比过程，从而降低事件复杂度O（n);

②vue.2.x 中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方;

③vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch;

④diff过程整体遵循深度优先，同层比较的策略，两个节点之间比较会根据他们是否拥有子节点或者文本节点做不同操作，比较两组子节点是算法的重点，首先，假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点，借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

9.Vue中数据响应式的原理是什么？

在vue实例上添加 _data，指向data，然后通过_ data得到一个深度劫持的对象，然后再把组件实例需要的方法和 _ data添加到这个深度劫持的对象中，这样就得到了一个组件实例，当我们读写组件实例里的这些属性，就会触发object.defineproperty()的getter和setter，通过getter和setter来读写 _data的属性

10.Vue的生命周期函数有哪些？created和mounted有什么区别？

创建阶段：

beforeCreate（）：vue刚开始创建

created：vue实例创建完成

挂载阶段：

beforeMount：虚拟DOM合真实DOM刚要结合的阶段

mounted：虚拟DOM真正转化成真实DOM了

更新阶段：

beforeUpdate：数据刚要更新，还没更新呢

updated：更新完毕

销毁阶段：

beforeDestroy（）：vue实例销毁之前

destroyed（）：vue实例销毁阶段

created和mounted的区别：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

11.Vue中v-if和v-for为什么不推荐一起使用？

v-for的优先级高于v-if

原因：v-for比v-if优先级高，一起使用会浪费性能，不建议同时使用，如果必要的情况下，可以选择使用computed过滤掉不需要显示的项目。

12.Vue中数据变化，视图不更新的原因是？如何解决？

①在数组中通过数组下标修改数据值

②在对象中通过key添加数据

解决方法：

通过Vue.set()/this.$set(‘target’,index,value)

13.Vue中组件通信的流程是什么？

①父子通信 父组件往组件传值时，子组件往组件通过$emit()形式传递事件

②子传父 @click=”$emit(‘点击事件名称’,参数)”将事件传给父组件进行操作

③非父子组件：

①兄弟组件通信 ②需要一个父组件作为传递中间站，分组件进行模块处理时

②非兄弟组件通信 ③建立一个事件中转站或者使用vuex，需要数据共享和进行多组件处理数据时.

14.ES6有哪些新特性？

const和let、.模板字符串、箭头函数、对象和数组解构、.for...of、 for...in、symbol、class（类）、promise

15.箭头函数和普通函数有什么区别？

外形不同：

箭头函数使用箭头定义，普通函数中没有

箭头函数都是匿名函数

普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。

箭头函数不能用于构造函数，不能使用new

普通函数可以用于构造函数，以此创建对象实例。

箭头函数中this的指向不同

在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。

箭头函数不绑定arguments，取而代之用rest参数…解决

每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。但是箭头函数并没有此对象。

16.Vue中常见的修饰符及含义

lazy:输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据:

trim：输入框过滤首尾的空格

number：自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

stop：阻止了事件冒泡，相当于调用了event.stopPropagation方法

prevent：阻止了事件的默认行为，相当于调用了event.preventDefault方法

once：绑定了事件以后只能触发一次，第二次就不会触发

self：只当在 event.target 是当前元素自身时触发处理函数

17.请简单叙述Vue中父传子组件通信流程

1.子组件在props中创建一个属性，用于接收父组件传过来的值；

2.父组件 引入子组件–>注册子组件–>引用子组件；

3.在子组件标签中添加子组件props中创建的属性；

4.将所要传递的值赋值给该属性。

18.说说你对Promise的理解？

是异步编程的一种解决方案

它有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）；状态一旦改变，不可逆。

Promise对象的状态改变，只有两种可能： 从pending变为fulfilled 从pending变为rejected。

19.Vue的生命周期函数及含义？

beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created（）被创建 data 和 methods都已经被初始化好了，可以调用了

beforeMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的

mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步

updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁

destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

20.请简单叙述Ajax和Axios的区别？

axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装，

ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

21.Vue中computed，watch，methods三者的区别是?

methods 里面定义的是函数，仍然需要去调用它。

computed 是计算属性，事实上和 data 对象里的数据属性是同一类的（使用上）。

据依赖关系进行缓存的计算，并且只在需要的时候进行更新。

computed中的函数必须要用return返回

watch：类似于监听机制+事件机制

watch是监听一个值的变化，然后执行对应的回调。

watch中的函数有两个参数，前者是newVal，后者是oldVal。

watch中的函数是不需要调用的。

watch中的函数不是必须要用return

22.Vue中的过滤器是什么？如何自定义一个过滤器？

vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

可以用全局方法Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值：

23.什么是事件回调？

同步回调：同步回调是在事件发生后顺序调用回调接口方法，该种调用在事件调用触发之后，会顺序的调用回调方法；（什么是回调方法，回调可以简单理解为一种约定机制，假设有类A和类B,约定就是，当类B的方法被调用之后，就通知类A的某个方法）。

异步回调：比如现在有一个异步的请求方法，当它被调用了但后端服务器还没有响应数据，那么这时就会先去执行同步代码，等后端服务器响应回来数据了，再接着执行那个异步请求的方法，接收后端响应的数据。

24.说说你对ES6的模块化规范的理解？

所谓的模块化无非就是把一部分功能代码放到别的js文件中，再使用exports将需要导出的变量或方法或对象导出，然后当需要该功能时就使用require引入到其他的js文件中使用该模块导出的功能代码。

模块化的好处：提高代码的复用性 可维护性

功能独立便于后期管理和维护

防止全局变量的污染（浏览器中没有模块作用域的概念）

可以实现按需加载

25.Vue中常见的修饰符及作用？

（1）事件修饰符

stop:阻止了事件冒泡行为

prevent:阻止了事件的默认行为

self:只当在event.target是当前元素自身时触发处理函数

once:绑定了事件以后只能触发一次，第二次就不会触发

captrue:开启事件捕获行为

passive:在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符

native:让组件变成像html内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

（2）表单修饰符

lazy:当使用v-model实现双向绑定时，通过input输入改变data对象中的数据，使用.lazy可以实现光标离开标签的时候才会把值传到data对象中

trim:自动过滤用户输入的首尾空格字符

number:自动将用户输入的值转为数值类型

（3）鼠标修饰符

left 左键点击

right 右键点击

middle 中键点击

（4）键盘修饰符

键盘修饰符是用来修饰键盘事件（onkeyup，onkeydown）的，有如下：

keyCode存在很多，但vue为我们提供了别名，分为以下两种：

普通键（enter、tab、delete、space、esc、up...）

系统修饰键（ctrl、alt、meta、shift...）

（5）v-bind修饰符

async:能对props进行一个双向绑定

prop:设置自定义标签属性，避免暴露数据，防止污染HTML结构

camel:将命名变为驼峰命名法，如将view-Box属性名转换为 viewBox

26.Computed, watch，methods三者的区别是什么？

methods 里面是用来定义函数的，它需要手动调用才能执行。 而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数 methods 里面定义的是 函数 ，仍然需要去调用它。 computed 是 计算属性 ，事实上和 data 对象里的数据属性是同一类的（使用上）。watch:监听的值必须是在data对象里面已经定义好的。 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

27.Vue中的scoped的作用是什么？

在vue中引入了scoped这个概念，scoped的设计思想就是 让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多