vue常见面试题汇总

1. 谈谈你对MVVM开发模式的理解

   MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；

   Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

2. v-if 和 v-show 有什么区别？

   v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
   

3. 简述Vue的响应式原理

   Vue. js采用ES5提供的属性特性功能，结合发布者-订阅者模式，通过 Object.defineProperty()为各个属性定义get、set特性方法，在数据发生改变时给订阅者发布消息，触发相应的监听回调。
   

具体步骤如下。

（1）对需要观察的数据对象进行递归遍历，包括子属性对象的属性，设置set和get特性方法。当给这个对象的某个值赋值时，会触发绑定的set特性方法，于是就能监听到数据变化。

（2）用 compile解析模板指令，将模板中的变量替换成数据。然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者。一旦数据有变动，就会收到通知，并更新视图

（3） Watcher订阅者是 Observer和 Compile之间通信的桥梁，主要功能如下。

在自身实例化时向属性订阅器（dep）里面添加自己。
自身必须有一个 update( )方法。
在 dep.notice()发布通知时，能调用自身的 updat()方法，并触发 Compile中绑定的回调函数。
（4）MVVM是数据绑定的入口，整合了 Observer、 Compile和 Watcher三者，通过Observer来监听自己的 model数据变化，通过 Compile来解析编译模板指令，最终利用Watcher搭起 Observer和 Compile之间的通信桥梁，达到数据变化通知视图更新的效果。利用视图交互，变化更新数据 model变更的双向绑定效果。

 

4、请详细说明你对Vue.js生命周期的理解。

总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。
created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
beforeMount：在挂载开始之前调用，相关的 render函数首次调用。
mounted:    el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。
beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
当使用组件的kep- alive功能时，增加以下两个周期。

activated在keep- alive组件激活时调用；
deactivated在keep-live组件停用时调用。
Vue2.5.0版本新增了一个周期钩子：ErrorCaptured，当捕获一个来自子孙组件的错误时调用。

5、vue父组件在接收子组件方法传递参数的时，如何添加自定义参数
在vue中，父组件中使用子组件方法的和传递过来的参数时直接只用参数就可以了，如下：

// child
this.$emit('change', param)
// parent
@change='parentHandle(param)'
方法一
子组件传出单个参数时：

// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'
方法二
子组件传出多个参数时：

// 子组件
this.$emit('test',this.param1，this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'

方法三：element的日期选择插件，@change方法如何传递参数
在@change事件里用一个箭头函数来传递两个参数给函数 changeHandler
<div v-if="item.name == key && item.dataType == 'Date'">

<el-date-picker v-model="editForm[item.name]" placeholder="选择日期"
    :editable="false" style="width:100%"
    @change="(value) => changeHandler(value, item.name)">
</el-date-picker>

</div>
在changeHandler里就能取到你要的值了
methods: {

// value是空间选择的值，itemName是你要的值
changeHandler(value, itemName) {
    console.log('value', value)
    console.log('itemName', itemName)
}

}

6、请描述封装Vue组件的作用过程。

组件可以提升整个项目的开发效率，能够把页面抽象成多个相对独立的模块，解决了传统项目开发中效率低、难维护、复用性等问题。

使用Vue.extend方法创建一个组件，使用Vue.component方法注册组件。子组件需要数据，可以在 props中接收数据。而子组件修改妤数据后，若想把数据传递给父组件，可以采用emit方法。

7、你是怎样认识vuex的？

vuex可以理解为一种开发模式或框架。它是对 Vue. js框架数据层面的扩展。通过状态（数据源）集中管理驱动组件的变化。应用的状态集中放在 store中。改变状态的方式是提交 mutations，这是个同步的事务。异步逻辑应该封装在 action中。

8、Vue- loader是什么？它的用途有哪些？

它是解析.vue文件的一个加载器，可以将 template/js/style转换成 JavaScript模块。

用途是通过 vue-loader, JavaScript可以写 EMAScript 6语法， style样式可以应用scss或less, template可以添加jade语法等。

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

assets文件夹存放静态资源；components存放组件；router定义路由相关的配置；view是视图；app. vue是一个应用主组件；main.js是入口文件。

10、在Vue.cli中怎样使用自定义组件？在使用过程中你遇到过哪些问题？

具体步骤如下。

（1）在 components目录中新建组件文件，脚本一定要导出暴露的接口。

（2）导入需要用到的页面（组件）。

（3）将导入的组件注入uejs的子组件的 components属性中。

（4）在 template的视图中使用自定义组件。

11、谈谈你对vue.js的 template编译的理解。

简而言之，就是首先转化成AST（ Abstract Syntax Tree，抽象语法树），即将源代码语法结构抽象成树状表现形式，然后通过 render函数进行渲染，并返回VNode（ Vue. js的虚拟DOM节点）。

详细步骤如下。

（1）通过 compile编译器把 template编译成AST, compile是 create Compiler的返回值， createCompiler用来创建编译器。另外， compile还负责合并 option。

（2）AST会经过 generate（将AST转化成 render funtion字符串的过程）得到 render函数， render的返回值是 VNode, VNode是 Vue.Js的虚拟DOM节点，里面有标签名子节点、文本等。

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

在每一个Vue.js组件中都可以定义各自的CSS、 JavaScript代码。如果希望组件内写的CSS只对当前组件起作用，只需要在Style标签添加Scoped属性，即<style scoped></style>。
13、如何检测数据变化？

由于 JavaScript特性的限制， Vue. js不能检测到下面数组的变化，即以下数组中改变的数据“丢失”了。

通过直接索引设置元素，如app.arr[0]=...

修改数据的长度，如 app. arr.length。

为了解决该问题，Vue.js扩展了观察数组，为它添加了一个$set( )方法，用该方法修改的数组，能触发视图更新，检测数据变化。

app.$set(app. arr, 5， 500);
14、如何检测对象变化？

由于 JavaScript特性的限制，Vue.js不能检测到对象属性的添加或删除。因为Vue.js在初始化时将属性转化为 getter/setter，所以属性必须在data对象中定义，才能在初始化时让Vue.js转换它并让它响应，例如以下代码

var data ={

  obj:{

  a:1

}

}

var app= new Vue ({

el：'#app ',

data:data 

})

app.obj.a=10

// 'app.obj.a'和'data.obj.a'现在是响应的

app. obj. b=2

//'app.obj.b'不是响应的

data.obj.b=2

//data.obj.b'不是响应的
如果需要在实例创建之后添加属性并且让它能够响应，可以使用$set实例方法。

app.$set（app.obj，'b'，500）

// 'app.obj.b'和'data.obj.b'现在是响应的
对于普通数据对象，可以使用全局方法Vue.set（ object,key, value）。

Vue.set（data.obj，"b'，500）
//'app.obj.b'和'cata,obj.b'现在是响应的
15、说一下Vue.js页面闪烁{{message}}。

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

[v-cloak ]{

 display:none;

}

<div v-cloak> { { title } }</div>
这样<div>不会显示，直到编译结束。
16、如何解决数据层级结构太深的问题？

在开发业务时，经常会岀现异步获取数据的情况，有时数据层次比较深，如以下代码。

<span 'v-text="a.b.c.d"></span>

可以使用vm.$set手动定义一层数据。

vm.$set ("demo"，a .b.c.d)
17、 Vue3.x响应式数据原理
Vue3.x改用Proxy替代Object.defineProperty。
因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

18、Vue3.0 里为什么要用 Proxy API替代 defineProperty API？
1.defineProperty API 的局限性最大原因是它只能针对单例属性做监听。
Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
2.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作， 这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
3.响应式是惰性的。
在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。
在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。
19、Proxy 与 Object.defineProperty 优劣对比
1.Proxy 可以直接监听对象而非属性；
2.Proxy 可以直接监听数组的变化；
3.Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
5.Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
6.Object.defineProperty 的优势如下:
兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象
我们知道，Vue组件其实就是一个Vue实例。

JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。

Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。

因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。

使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身，就不会相互影响了。

而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
20.单页面应用和多页面应用区别及优缺点
答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

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

单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。

单页面缺点：不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
不支持低版本的浏览器，最低只支持到IE9；第一次加载首页耗时相对长一些；
21.$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
22.vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用
23.vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
24.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
25.怎么定义 vue-router 的动态路由? 怎么获取传过来的值
答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params
26、vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。
这只是一个简单的例子，看完这个不知你是不觉得有个指令跟这个很相似，v-model？对，就是v-model在组件上使用的时候。

27、vue-cli如何新增自定义指令？
（1.创建局部指令
var app = new Vue({

el: '#app',
data: {    
},
// 创建指令(可以多个)
directives: {
    // 指令名称
    dir1: {
        inserted(el) {
            // 指令中第一个参数是当前使用指令的DOM
            console.log(el);
            console.log(arguments);
            // 对DOM进行操作
            el.style.width = '200px';
            el.style.height = '200px';
            el.style.background = '#000';
        }
    }
}

})

（2.全局指令
Vue.directive('dir2', {

inserted(el) {
    console.log(el);
}

})

（3.指令的使用
<div id="app">

<div v-dir1></div>
<div v-dir2></div>

</div>
28、vue如何自定义一个过滤器？
html代码：
<div id="app">

 <input type="text" v-model="msg" />
 {{msg| capitalize }}

</div>

JS代码：
var vm=new Vue({

el:"#app",
data:{
    msg:''
},
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

})
全局定义过滤器
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

29、rem移动端自适应
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0]
HtmlDom.style.fontSize = htmlWidth/20 + 'px' //假定是iphone5 width=320 html的1rem font-size:16px
width : 20rem/320px ipone5
width: 20rem/ 375px

30、<span>{{scope.$index+1}}</span> （）这样可以获取索引值

31、
vue-cli 解决ie兼容性问题
首先兼容ie只需要安装一个插件就好了npm install babel-polyfill --save-dev
使用方法,打开项目build文件夹下的webpack.base.conf.js文件，在里边配置如下
module.exports = {
entry: {

app: ['babel-polyfill', './src/main.js']

},
}

然后再main.js中引入就好了
import 'babel-polyfill'

这样就可以解决兼容性问题了，但是这样并没有兼容axios的请求以及一些api,例如：-Pormise
解决上述问题就需要安装其他的一些插件。
Step一，promise问题？axios不能直接兼容ie
npm install es6-promise

使用方法：
import promise from 'es6-promise';
promise.polyfill();

Step二，URLSearchParams未定义的问题，原来是IE9不支持URLSearchParams。
解决办法：下载qs
npm install qs

然后main.js全局引入import qs from 'qs';
如何配置 vue-cli 3.0 的 vue.config.js
https://segmentfault.com/a/11...
那些年曾谈起的跨域
https://segmentfault.com/a/11...