vue最全面试题

1.mvc，mvp与mvvm模式

MVC

MVC是应用最广泛的软件架构之一，一般 MVC 分为：

Model（ 模型 ） 、 Controller（ 控制器 ） 、 View（ 视图 ） 。

这主要是基于分层的目的，让彼此的职责分开。 View 一般通过 Controller 来和 Model 进行联系。

Controller 是 Model 和 View 的协调者， View 和 Model 不直接联系。基本联系都是单向的。

1、View 传送指令到 Controller

2、Controller 完成业务逻辑后，要求 Model 改变状态

3、Model 将新的数据发送到 View，用户得到反馈

MVP

MVP 模式将 Controller 改名为 Presenter ，同时改变了通信方向

1、各部分之间的通信，都是双向的。

2、View 与 Model 不发生联系，都通过 Presenter 传递。

3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel

View 的变化会自动更新到 ViewModel ， ViewModel 的变化也会自动同步到 View 上显示。这种自动

同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作。

2 .MVVM模式的优点以及与MVC模式的区别？

MVVM模式的优点：

1、低耦合： 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同

的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2、可重用性： 你可以把一些视图逻辑放在一个ViewModel里面，让很多 view 重用这段视图逻辑。

3、独立开发： 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

4、可测试： 界面素来是比较难于测试的，而现在测试可以针对ViewModel来写

MVVM 和 MVC 的区别：

mvc 和 mvvm 其实区别并不大。都是一种设计思想

mvc 中 Controller演变成 mvvm 中的 viewModel，

mvvm 通过数据来显示视图层而不是节点操作。

mvvm主要解决了: mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

3.常见的实现MVVM数据绑定的做法有哪些？

（1）发布者-订阅者模式（backbone.js）

（2）脏值检查（angular.js）

（3）数据劫持（vue.js）

1、发布者-订阅者模式:

一般通过 sub , pub 的方式实现数据和视图的绑定监听，

更新数据方式通常做法是 vm.set('property', value) 。

这种方式现在毕竟太low了，我们更希望通过 vm.property = value 这种方式更新数据，同时自动更新视图，于是有了下面两种方式

2、脏值检查:

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，

最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular只有在指定的事件触发时进入脏值检测

3、数据劫持:

vue.js 则是采用 数据劫持 结合 发布者-订阅者 模式的方式，

通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，

在数据变动时发布消息给订阅者，触发相应的监听回调

4 .Object.defineProperty()方法的作用是什么？

Object.defineProperty() 方法 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法：Object.defineProperty(obj, prop, descriptor)

参数说明：

obj：必需。目标对象

prop：必需。需定义或修改的属性的名

descriptor：必需。目标属性所拥有的特性

返回值：传入函数的对象。即第一个参数obj

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

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

Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性

2、组件系统

.vue组件的核心选项

1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状

态。

3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。

4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。

5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。

6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用

6.什么是vue生命周期？

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期

7.vue生命周期钩子函数都有哪些？分别是什么意思

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreated阶段，vue实例的挂载元素el还没有。在created阶段,vue实例的数据对象data有了,el还没有.

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

8.vue生命周期的作用是什么？

生命周期中有多个事件钩子，让我们在控制整个 vue 实例的过程时更容易形成好的逻辑

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

第一次加载会触发 beforeCreate、created、beforeMount、mounted

10.简述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom

11.created和mounted的区别?  

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

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

12.vue获取数据在哪个周期函数 ？

看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）

13.什么是vue路由？

Vue路由就是指vue-router,其中router是指根据url分配到对应的处理程序,所以说路由就是用来解析URL以及调用对应的控制器并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端

14.vue路由的优点以及缺点是什么？

优点：

不需要每次都从服务器获取，渲染页面更快速

缺点:

不利于SEO

使用浏览器前进、后退按键时重新发送请求，未合理利用缓存

单页面无法记住之前滚动的位置

15.请简单说一下vue路由的原理？

Vue的路由实现：hash模式 和history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：

hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

特点:

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

16.怎么定义 vue-router 的动态路由?如何获取动态路由传过来的值

定义动态路由：

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。

获取动态路由传过来的值:

使用 router 对象的 params.id 获取

17.请描述vue-router路由守卫的作用？

vue-router 的导航钩子，主要用来作用是拦截导航，让他完成跳转或取消。

18.路由守卫使用的方式有几种？

全局的

单个路由独享的

组件级的

19.路由守卫的钩子函数都有哪些？分别是什么意思？

vue-router全局有三个守卫：

router.beforeEach 全局前置守卫 进入路由之前

router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

router.afterEach 全局后置钩子 进入路由之后

组件内的守卫：

beforeRouteEnter

beforeRouteUpdata(2.2新增)

beforeRouteLeave

20.路由守卫钩子函数里面的三个参数分别是什么

to,from,next 这三个参数：

to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。next() 进入该路由。next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

我们可以这样跳转：next('path地址')或者next({path:''})或者next({name:''})且允许设置诸如 replace: true、name: 'home' 之类的选项以及你用在router-link或router.push的对象选项。

21路由守卫的解析流程

导航被触发

在失活的组件里调用离开守卫

调用全局的 beforeEach 守卫

在重用的组件里调用 beforeRouteUpdate 守卫

在路由配置里调用 beforEnter

解析异步路由组件

在被激活的组件里调用 beforeRouteEnter

调用全局的 beforeResolve 守卫

导航被确认

调用全局的 afterEach 钩子

触发 DOM 更新

在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

22.vue-router路由传参的方式一共有几种？他们是如何就收传递过来的参数？

分别是query，params，动态路由传参

接收：

通过query方式传递过来的参数一般是通过this.$route.query接收

通过params方式传递过来的参数一般是通过this.$route.params接收

通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

23.query和arams方式的区别是什么？

query使用path和name传参跳转都可以，而params只能使用name传参跳转。

传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失

24.什么是路由懒加载？以及路由懒加载是如何实现的

按需加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的 异步组件 和 Webpack 的 代码分割 功能，轻松实现 路由组件的懒加载。

25.什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的个人理解是vuex其实就是一个管理数据的工具，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

26.vuex的优点和缺点是什么？

优点：

解决了非父子组件的消息传递（将数据存放在state中）

减少了AJAX请求次数，有些情景可以直接从内存中的state获取数据方便管理以及维护

缺点：小型项目使用的话，vuex会显得有点繁琐冗余

刷新浏览器，vuex中的state会重新变为初始状态，我们如何要解决这个问题就可能需要用本地存储或者vuex的一个插件

27.一般什么情况下使用 vuex?

当页面的组件比较多，业务比较复杂时，数据难以维护，这个时候我一般会使用vuex

28.vuex的原理是什么？

每个Vuex应用的本质是store(仓库），包含应用中大部分的状态。

state, getters,mutations,actions,module

29.请你说一下vuex的用法？

安装vuex

在src目录下创建store文件夹，在该文件夹内创建index.js

在store文件夹内的index.js文件内引入vuex

然后在引入vue

调用Vue.use()方法注册vuex

对vuex进行实例化

进行实例化之后通过export default导出

在main.js文件内引入store文件夹内的index.js文件

挂载到new Vue实例上面

初始化vuex的状态和属性

30.你在项目中哪些地方用到了vuex？

登录模块，购物车模块，订单模块，商品模块

31.vuex的运行机制什么？

在vue组件里面，通过dispatch来触发actions提交修改数据的操作。

然后再通过actions的commit来触发mutations来修改数据。

mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

最后由store触发每一个调用它的组件的更新

32.vuex都有哪些属性

State、Getter、Mutation 、Action、Module 五种

state => 基本数据

getters => 从基本数据派生的数据

mutations => 提交更改数据的方法，同步！

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

33. 你是如何获取state的值，如何调用gettes里面定义的方法？如何调用mutations的方法？如何调用actions的方法？

state的值获取的方式有两种：

第一种是组件里面进行获取 this.$store.state.状态

第二种是在vuex内部进行获取

函数参数里面会有一个state参数，通过这个state参数我们可以直接拿到state的值getters的方法在组件内调用的话是通过this.$store.getters来进行获取，而getters的作用一般是用来获取state的值

mutations的方法在组件内调用时一般是通过this.$store.commit()来进行调用，而mutations的作用一般是用来改变state里面状态，只不过通过同步的方式去改变

actions的方法在组件内调用的话是通过this.$store.dispatch()来进行调用，而actions的作用一般是用来异步的改变状态，actions也支持promise

34.vuex里面module属性的作用是什么？

module属性相当于是vuex里面的模块化方法，module属性可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

比如：购物车模块，订单模块，商品模块...每个模块都有自己的数据，建立多个模块文件来保存各自对应模块的数据，最后，在module属性里面进行合并

35不使用vuex会带来什么问题?

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背

36.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，

并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

37.Vuex中如何异步修改状态？

actions去异步的改变state的状态，mutations是同步改变状态，调用actions内定义的方法，需要通过this.$store.dispatch(),mutations方法是通过this.$store.commit()来进行调用,而在actions要调用mutations的方法，通过commit来进行调用

38.Vuex中actions和mutations的区别 ?

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作

mutations只能是同步操作

39.页面刷新后vuex的state数据丢失怎么解决？

localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate

vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中_committing是否为true

40.请你说一下你对vue组件通信的理解？

vue组件的通信是为了解决组件之间数据传递的问题，分为

父子组件之间的通信

非父子组件的通信

41. 父组件如何与子组件怎么通信？

父组件将数据绑定在子组件上

子组件通过props属性来进行接收，props的接收方式有两种，分别是数组的方式接收，以及对象的方式接收，他们两个的不同是对象接收的方式可以设置默认值以及传递过来的类型

42.子组件如何与父组件进行通信？

在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件就行了

43.非父子组件之间如何进行通信 ?

非父子组件之间通信我们可以使用vuex或者event bus，而这个event bus我们把它称之为中央时间总线，vue中央事件总线这种方法适用于任何情况的父子组件通信，同级别组件通信，相当于组件通信间的万金油。但是碰到多人合作时，代码的维护性较低，代码可读性低（这个缺点可以忽略）

44.除了组件之间的这种通信方式以外，还是什么方式可以让组件的数据进行共享

路由，vuex，本地存储

45.props接收父组件发送过来的数据有几种形式

两种，一种是数组，另外一种是对象

46.非父子组件之间通信的原理是什么

非父子组件之间通信我们一般使用event bus，中央时间总线来进行解决，而中央事件总线的鱼哪里是通过vue实例化之后的对象调用bus.emit来进行数据的发送,通过bus.$on来进行接收

47.请描述vue的优点是什么？缺点是什么 ？

vue的优点:

        简单易用

        灵活渐进式

        轻量高效

        压缩之后20KB大小

        虚拟DOM

        MVVM

        数据驱动视图

        常规的操作方式都是DOM

        普通的javascript数据

        组件化

组件化优点：

        提高开发效率

        方便重复使用

        简化调试步骤

        提升整个项目的可维护性

        便于协同开发

·vue的缺点：VUE不支持IE8

48.请你描述一下vue中让元素隐藏的方式有几种？区别是什么 ？

v-show v-if

共同点:

v-if 和 v-show 都是动态显示DOM元素。

区别：

编译过程： v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的 事件监听器

和 子组件 适当地 被销毁 和 重建 。 v-show 的元素 始终会 被渲染并保留 在 DOM 中 。 v- show 只是简单地 切换 元素的 CSS 属性 display 。

编译条件： v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。 v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

性能消耗： v-if有更高的切换消耗。v-show有更高的 初始渲染消耗`。

应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换

49.请你说一下keep-alive？你在哪些地方用过它？

keep-alive： 主要用于 保留组件状态 或 避免重新渲染 。

比如： 有一个 列表页面 和一个 详情页面 ，那么用户就会经常执行打开 详情=>返回列表=>打开详情 这样的话 列表 和 详情 都是一个 频率很高 的页面，那么就可以 对列表组件 使用 `进行缓存，这样用户每 次 返回列表 的时候，都能 从缓存中快速渲染 ，而 不是重新渲染

50.请你说一下为什么使用key ？

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

51.请描述v-model是什么？以及他的作用？以及他的原理是什么？

v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值

v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化

52.请你描述一下你对$nextTick的理解 ？

nextTick是vue里面提供的一个方法,当dom更新循环结束之后执行延迟回调,在修改数据之后可以使用 nextTick,那么我们可以在回调中获取更新后的dom，我们写项目的时候，当时点击按钮要获取一个元素的内容，但是发现了第二次点击的时候才回去到了，后台在网上查了一下，发现是vue异步更新队列的问题，后来是通过$nextTick解决的

53.说一下你对渐进式框架的理解 ？

就是主张最少，可以只用一部分功能，而不必使用全部，而且可以跟其他框架结合使用，没有多做职责之外的事

54.说一下你对vue数据双向绑定的理解 ？

就是利用了Object.defineProperty()这个方法重新定义了对象获取属性get和设置属性set来操作实现的

55.说一下vue单页面和多页面的区别 ？

单页面就是组件之间来回跳转，跳转速度快，不需要请求数据 缺点：首屏加载慢，跳转快

多页面就是页面之间来回跳转，跳转速度慢，每次跳转都需要向后台请求数据 缺点：首屏加载快，跳转速度慢

56.请你说一下vue的核心是什么 ？

vue的核心是：数据驱动，组件化开发

数据驱动：

mvvm模式

组件化开发:

就是内聚性和藕合度（高内聚，低藕合）

57.请你说一下vue和jquery的区别 ？

jquery是直接操作DOM的而vue是操作数据的

vue做到了数据和视图完全分离，他首先把值和JS对象进行绑定，然后在修改JS对象的值，vue框架就会自动把DOM的值进行更新，对数据进行操作不在需要引用相应的DOM对象，他们通过Vue对象实现数据和视图的相互绑定

jquery则是先使用选择器($)来选取Dom对象，然后对Dom对象进行操作（如赋值丶取值丶事件绑定等）

58.你在vue中怎么样让你写的css样式只在你当前写的组件中显示

 在style前面加上scoped就可以了

scoped属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素

59.请你说一下在vue中如何获取dom元素 ?

不同的版本获取dom对象的方法不同

vue.js 1.0版本中，通过v-el绑定，然后通过this.els.XXX来获取

vue.js 2.0版本中，通过给元素绑定ref=‘XXX’，然后通过this.$refs.XXX或者this.refs['XXX']获取

注意：vue中操作dom需要谨慎，尤其是添加或者删除dom的时候，特别是mounted()和created（）的时候，此时的dom对象还没有生成，要放在this.nextTick的回调函数中

60.说一下你对axios的理解？

axios是一个基于promise的http库，可以用在浏览器和node.js中，axios之所以兴起是因为完美的结合promise使用，可以同时在浏览器和服务器上使用，可配置性强，支持非常多的人性化特性

axios真正能够单独的发送请求，拥有各种请求方法，axios是一个实例对象，axios.create相当于类对象的’构造函数‘，对axios来说是有很多内部属性都可以配置的，但是一旦改变axios属性，意味着以后所有的通过axios实例发出的请求，都会将外部配置和当前axios实例内部配置合并，这是非常可怕的。

61.说一下axios如何解决跨域 ？

首先说一下为啥会产生跨域，跨域：浏览器从⼀个域名的⽹页去请求另⼀个域名的资源时，域名、端⼝、协议任⼀不同，都是跨域
使用跨域资源共享，cors进行跨域

changeOrigin: true ：开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端就可以进行数据的交互。

apis就是接口实际请求的前缀，去代理了我们的实际的接口前缀的公共部分，也就是协议+主机名+端口号

62.请描述computed，watch和methods的区别？以及他们的使用场景

computed计算属性对比于methods： 

1. computed响应式，而methods非响应；computed在调用时只有当其引用的响应式属性改变时才会调用函数重新计算值（存在缓存），而methods是一个函数，每次调用就是执行其函数式
2. computed中的成员可以只定义一个函数作为只读属性，也可以自定义get/set作为读写属性
3. computed以vue对象的属性形式存在

computed计算属性对比于watch侦听器：

1. 相同点：都是vue对监听器的实现，都起到监听/依赖一个数据并进行处理的作用
2. 在应用中，computed主要应用于同步数据，而watch是用来观测一个值的变化去实现一段开销较大的复杂业务逻辑或执行异步操作
3. 能用computed时优先使用computed，避免当我们需要得到的值依赖于多个数据时多次调用watch的尴尬

4. watch监听的值接收两个参数——新值、旧值 ，可以设置在初始化时调用

63.请你说一下什么是vue的过滤器？你在项目中哪些地方使用过过滤器?

• 过滤器对将要显示的文本，先进行特定格式化处理，然后在进行显示。
• 注意：过滤器并没有改变原本的数据，只是产生新的对应的数据。

全局过滤器，局部过滤器

过滤器可以用在两个地方：双花括号{{}} 和 v-bind 表达式

64.请你说一下你对vue指令的理解？以及他的使用场景？ 并描述你在项目中安歇地方使用过vue自定义指令

v-model：双向绑定 

• mount 和 el 的作用相同 .$mount('#app')此方式只是挂载在实例后面。

• v-text：展示其对应的文本

• v-once：对应的标签只渲染一次

• v-html：把值中的标签渲染出来

• v-on：事件绑定

• v-show=‘布尔’：布尔为 true 显示，false 隐藏。

• v-cloak：防止页面加载时出现 vuejs 的变量名指令，在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到 v-cloak 来解决

• v-bind：适用于绑定行内属性

• @keyup.enter：只有按 enter 键才会出发后边的函数

使用自定义指令背景

• 代码复用和抽象的主要形式是组件。
• 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
• 但是，对于大幅度的 DOM 变动，还是应该使用组件

65.请你说一下你在vue打包项目的时候有没有出现什么问题？你是如何解决的 ？

1.syntax Error: Thread Loader (Worker 0) Cannot read property ‘length’ of undefined

解决方法：

1. 先删除 node_modules 文件夹
2. 再清理一下缓存
   npm cache clean -f
3. 重新安装模块
   npm install

2. gyp verb cli xxx

解决方法：

1. 先试试
   npm i --save node-sass

2. 不行就
   cnpm i --save node-sass

66.请你描述一下react和vue的区别是什么?

React与Vue的相同点
（1）都支持服务器渲染；

（2）都是数据驱动视图；

在以前，我们需要频繁操作DOM实现页面效果。而Vue和React就隐藏了DOM的频繁操作，采用数据驱动视图的方式，只需要关注数据的变化。

（3）都遵循组件化思想；
React和Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一一些细块，也就是组件，组件之间组合嵌套就形成最后的网页界面。

（4）都使用虚拟DOM；

（5）都有状态管理；

react有redux，vue有vuex。

不同点
（1）框架本质不同；

Vue本质是MVVM框架，是由MVC发展来的；
React是前端组件框架，是由后端组件演化而来的。

（2）数据流不同；

Vue实现双向绑定，在vue1.0中有两种方法可以实现双向绑定，父子组件之间的props以及组件与DOM直接的v-model。vue2去掉了第一种双向绑定方法，通过v-model实现数据双向绑定。

React一直不支持双向绑定，提倡的是单向数据流（onChange/setState）。

（3）监听数据变化的实现原理不同；

Vue通过getter，setter以及一些函数的劫持，能精确知道数据的变化。
React是通过比较引用方式（diff）进行的，当应用的状态改变时，全部组件都会重新渲染。

（4）组件写法差异；

React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中；
Vue 推荐的做法是 template 的单文件组件格式，即 html,css,JS 写在同一个文件(vue也支持JSX写法)

（5）渲染过程不同。

Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制。

（6）在state上的不同；

React中，state对象需要用setState方法更新状态；
在Vue中，state对象不是必须的，数据由data属性在vue对象中管理。

67.请你说一下如何优化vue首屏加载的速度

对于第三方js库的优化，分离打包

vue-router使用懒加载

图片资源的压缩，icon资源使用雪碧图

开启gizp压缩

webpack相关配置优化

前端页面代码层面的优化

68.请你说一下你对slot的理解

Vue的slot插槽，可以从字面意思来了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具体的内容来替换代替。根据slot的应用场景可以分为匿名slot和具名slot。

在子组件利用<slot></slot>元素作为承载分发内容的出口，父组件的插槽内容将在其中显示

其实质是对子组件的扩展，通过slot插槽向组件内部指定位置传递内容，即将<slot></slot>元素作为承载分发内容的出口；

具名插槽  作用域插槽

69.请你描述一下封装vue组件的过程 ？

vue组件的定义：

        组件是vue.js最强大的功能之一

        组件可以扩展html元素，封装可重用代码

 vue组件的功能：

能够把页面抽象成多个相对独立的模块

实现代码重用，提高开发效率的代码质量，使代码便于维护

vue组件封装过程：

使用vue.extend()先创建一个组件

使用vue.component()方法注册组件

接着，如果子组件需要数据，可以在props中接收定义

最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit（）方法

70.如果说你在开发项目的时候，后台的接口还没有写完，请问这个时候你一般会怎么做 ？

在测试的时候经常会碰到后端开发工程师的接口还没有开发完成，但是测试任务已经分配过来。

没有接口怎么测试呢？

测试人员可以通过mock server自己去造一个接口来访问。

mock server可用于模拟真实的接口。

收到请求时，它会根据配置返回对应的请求。

在前后端分离的大背景下，mock server 在前端开发应用非广泛，也影响到测试人员。

1.注册mock server

◆ 第 1 步，点击 new;

◆ 第 2 步，选择 mock server;

◆ 第 3 步，创建新的 api 和 mock server 的名字

2、已有api创建mock服务

3、创建接口

4、设置环境

5、返回动态参数

71.vue如何封装通用组件

数据从父组件传入

在父组件中处理事件

solt的应用，插槽使用

统一管理各个组件的公共样式

72.vue常用的ui组件库有哪些

Element UI：它是一个用于 Web 的 UI 组件库

  Vuetify 是一个基于 Vue.js 精心打造 UI 组件库，整套 UI 设计为 Material 风格

采用 BootstrapVue 构建响应式、移动优先、ARIA项目（Accessible Rich Internet Application，可访问的富媒体应用，即无障碍友好应用)，基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4。

vue-material是一个建立在谷歌的Material Design基础上的轻量级框架，是一个实现Google像素材料设计的Vue组件库，它提供了适合所有现代Web浏览器的内置动态主题的组件，它的API也简单明了

VUX 是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库，主要服务于微信页面

View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

Mint-UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。它可以实现真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

Buefy 基于 Bulma 和 Vue.js 的轻量级UI组件，它提供了即装即用的轻量级组件

Quasar 包括用 Vue 构建的几十个 Vue.js 组件组成，为响应式 Web 应用程序和混合移动应用程序提供的丰富功能选项。组件是作为 Web 组件编写的，所以它们嵌入了 HTML，CSS 和 Javascript 代码，只需在页面和布局模板中标注一个 HTML 标记即可使用

Vuesax是基于Vue.js的组件框架,从零开始设计，可以逐步采用。Vuesax致力于促进应用程序的开发，在不删除必要功能的情况下改进其设计。“我们希望所有组件具有独立的颜色，形状和设计，以实现我们前端喜欢的自由设计，同时又不损失创作和生产的速度。

73.vue常用的修饰符一共有哪些

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

74.请你说一下ajax和axios的区别是什么

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。

75.vue组件如何适配移动端

不仅仅只用到amfe-flexible还需要用到postcss-pxtorem。postcss-pxtorem是将我们在css中写的px单位转换为rem单位。与其相似的包还有postcss-pxtorem该包则是将px转换成了2倍的rem单位。

76.说一下在vue中如何使用背景图片 ？

1. 在App.vue中将样式中默认的margin-top 改为0，使得页面顶部不留白
2. 在App.vue中加入body样式，使得背景图片四周不会留有空白
3. 在需要背景图的页面里加入样式building
4. 在原有代码中的div外再套一层div
5. 显示el-dialog弹窗时背景会变灰色，解决办法是将el-dialog的append-to-body属性设为true

77.如何解决禁用表单后移动端样式不统一问题

input:disabled{
    color:xxx;
    opacity:1;
    //text-fill-color文本填充颜色，只兼容webkit内核
    -webkit-text-fill-color:xxx;
    -webkit-opacity:1;
    font-size:16px;
}

78. 请你说一下数据双向绑定的原理是什么

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

79.什么是请求拦截，什么响应拦截？ 拦截点分别是那几个 ？

请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

它们的共同点都是:都是提前做了一些操作，可以作为程序优化的一种处理方式