对于前端来说，只管css、html、js是次要的基础知识，然而随着技术的一直倒退，呈现了很多优良的mv*框架以及小程序框架。因而，对于前端开发者而言，须要对一些前端框架进行熟练掌握。这篇文章咱们一起来聊一聊VUE及全家桶的常见面试问题。
1、请讲述下VUE的MVVM的了解？
MVVM 是 Model-View-ViewModel的缩写，行将数据模型与数据体现层通过数据驱动进行拆散，从而只须要关系数据模型前端培训的开发，而不须要思考页面的体现，具体说来如下：
Model代表数据模型：次要用于定义数据和操作的业务逻辑。
View代表页面展现组件（即dom展示模式）：负责将数据模型转化成UI 展示进去。
ViewModel为model和view之间的桥梁：监听模型数据的扭转和管制视图行为、解决用户交互。通过双向数据绑定把 View 层和 Model 层连贯了起来，而View 和 Model 之间的同步工作齐全是主动的，无需人为干预
在MVVM架构下，View 和 Model 之间并没有间接的分割，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因而View 数据的变动会同步到Model中，而Model 数据的变动也会立刻反馈到View 上。
2、VUE的生命周期及了解？
答：总共分为8个阶段，具体为：创立前/后，载入前/后，更新前/后，销毁前/后。
创立前/后： 在beforeCreated阶段：ue实例的挂载元素$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构造仍然存在。
具体解说及利用
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其余的货色都还没创立，data和methods中的数据都还没有初始化。不能在这个阶段应用data中的数据和methods中的办法
create：data 和 methods都曾经被初始化好了，如果要调用 methods 中的办法，或者操作 data 中的数据，最早能够在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中曾经编译好了模板了，然而还没有挂载到页面中，此时，页面还是旧的，不能间接操作页面的dom和获取dom对象
mounted：执行到这个钩子的时候，就示意Vue实例曾经初始化实现了。此时组件脱离了创立阶段，进入到了运行阶段。如果咱们想要通过插件操作页面上的DOM节点，最早能够在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据放弃同步
updated：页面显示的数据和data中的数据曾经放弃同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的data和 methods、指令、过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的data和methods、指令、过滤器 ……都是处于不可用状态。组件曾经被销毁了。
3、v-if和v-show的区别？
共同点：都能管制元素的显示和暗藏；
不同点：实现实质办法不同，v-show实质就是通过管制css中的display设置为none，管制暗藏，只会编译一次；v-if是动静的向DOM树内增加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创立比拟耗费性能。
如果要频繁切换某节点，应用v-show(切换开销比拟小，初始开销较大)。如果不须要频繁切换某节点应用v-if（初始渲染开销较小，切换开销比拟大）。
4、v-if和v-for同时应用在同一个标签上的体现？
当v-if与v-for一起应用时，v-for具备比v-if更高的优先级，这意味着v-if将别离反复运行于每个v-for循环中。
所以，不举荐v-if和v-for同时应用。如果v-if和v-for一起用的话，vue中的的会主动提醒v-if应该放到外层去
5、v-for中的key的了解？
须要应用key来给每个节点做一个惟一标识，Diff算法就能够正确的辨认此节点。次要是为了高效的更新虚构DOM。
6、vue中transition的了解？
1）定义transition时须要设置对应的name，具体语法为：<transition name=“fade”>须要动画的内容或者组件或者页面</transition>
2）过渡动画次要蕴含6个class，别离为：
• v-enter：定义元素进入过渡的初始状态，在元素插入前失效，插入后一帧删除，
• v-enter-active：在元素插入前失效，在动画实现后删除，
• v-enter-to：在元素插入后一帧失效，在动画实现后删除，
• v-leave：来到过渡的初始状态，在元素来到时失效，下一帧删除
• v-leave-active：在来到过渡时失效，在动画实现后删除
• v-leave-to：来到过渡完结状态，在来到过渡下一帧失效，在动画实现后删除

⚠️：v会转化为对应的transition的name值
3）当然咱们也能够自定义这六个class 能够间接在transition中设置对应的属性为对应的class名称，属性有：enter-class，enter-active-class，enter-to-class，leave-class，leave-active-class，leave-to-class
4）在同时应用过渡和css动画的时候 能够设置type属性来制订vue外部机制监听transitioned或者animationed事件来实现过渡还是动画的监听
5）如果须要设置对应的过渡工夫，能够间接设置属性duration，能够间接接管一个数字（单位为毫秒），也能够接管一个对象{enter:1000,leave:300}
6）也能够设置过渡的钩子函数，具体有：before-enter，enter，after-enter，enter-cancelled，before-leave，leave，after-leave，leave-cancelled
7、vue的自定义指令？
自定义指令分为全局指令和组件指令，其中全局指令须要应用directive来进行定义，组件指令须要应用directives来进行定义，具体定义方法同过滤器filter或者其余生命周期，具体应用办法如下：
全局自定义指令 directive(name,{})，其中name示意定义的指令名称（定义指令的时候不须要带v-，然而在调用的时候须要哦带v-），第二个参数是一个对象，对象中包含五个自定义组件的钩子函数，具体包含：

  1. bind函数：只调用一次，指令第一次绑定在元素上调用，即初始化调用一次，
  2. inserted函数：并绑定元素插入父级元素（即new vue中el绑定的元素）时调用（此时父级元素不肯定转化为了dom）
  3. update函数：在元素产生更新时就会调用，能够通过比拟新旧的值来进行逻辑解决
  4. componentUpdated函数：元素更新实现后触发一次
  5. unbind函数：在元素所在的模板删除的时候就触发一次

钩子函数对应的参数el,binding,vnode,oldnode,具体参数解说如下：
a、el指令所绑定的元素 能够间接操组dom元素
b、binding一个对象，具体包含以下属性：

  1. 1）name：定义的指令名称 不包含v-
  2. 2）value：指令的绑定值，如果绑定的是一个计算式，value为对应计算结果
  3. 3）oldvalue：指令绑定元素的前一个值，只对update和componentUpdated钩子函数有值
  4. 4）expression：指令绑定的原始值 不对值进行任何加工
  5. 5）arg：传递给指令的参数
  6. 6）modifiers：指令修饰符，如：v-focus.show.async 则接管的modifiers为｛show：true，async：true｝

c、vnode：vue编译生成的虚构dom
d、oldVnode：上一个vnode，只在update和componentUpdated钩子函数中无效
⚠️：如果不须要其余钩子函数，能够间接简写为：directive(“focus”,function(el,binding){})
8、vue的实现原理？
vue.js 是采纳数据劫持联合发布者-订阅者模式的形式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时公布音讯给订阅者，触发相应的监听回调。
具体步骤：
第一步：须要observe的数据对象进行递归遍历，包含子属性对象的属性，都加上setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变动
第二步：compile解析模板指令，将模板中的变量替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据有变动，收到告诉，更新视图
第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，次要做的事件是:

  1. 1、在本身实例化时往属性订阅器(dep)外面增加本人
  2. 2、本身必须有一个update()办法
  3. 3、待属性变动dep.notice()告诉时，能调用本身的update()办法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听本人的model数据变动，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变动 -> 视图更新；视图交互变动(input) -> 数据model变更的双向绑定成果。
9、vue的diff算法了解？
1）diff算法的作用：用来批改dom的一小段，不会引起dom树的重绘
2）diff算法的实现原理：diff算法将virtual dom的某个节点数据扭转后生成的新的vnode与旧节点进行比拟，并替换为新的节点，具体过程就是调用patch办法，比拟新旧节点，一边比拟一边给实在的dom打补丁进行替换
3）具体过程详解：
a、在采纳diff算法进行新旧节点进行比拟的时候，比拟是依照在同级进行比拟的，不会进行跨级比拟：

b、当数据产生扭转的时候，set办法会调用dep.notify告诉所有的订阅者watcher，订阅者会调用patch函数给响应的dom进行打补丁，从而更新实在的视图
c、patch函数承受两个参数，第一个是旧节点，第二个是新节点，首先判断两个节点是否值得比拟，值得比拟则执行patchVnode函数，不值得比拟则间接将旧节点替换为新节点。如果两个节点一样就间接查看对应的子节点，如果子节点不一样就阐明整个子节点全副扭转不再往下比照间接进行新旧节点的整体替换
d、patchVnode函数：找到实在的dom元素；判断新旧节点是否指向同一个对象，如果是就间接返回；如果新旧节点都有文本节点，那么间接将新的文本节点赋值给dom元素并且更新旧的节点为新的节点；如果旧节点有子节点而新节点没有，则间接删除dom元素中的子节点；如果旧节点没有子节点，新节点有子节点，那么间接将新节点中的子节点更新到dom中；如果两者都有子节点，那么持续调用函数updateChildren
e、updateChildren函数：抽离出新旧节点的所有子节点，并且设置新旧节点的开始指针和完结指针，而后进行两辆比拟，从而更新dom（调整程序或者插入新的内容 完结后删掉多余的内容）
10、vue组件的通信（父子组件和非父子组件）？
父子组件通信
传递参数能够应用props，传递函数能够间接在调用子组件的时候传递自定义事件，并应用$emit来调用，例如：
//父组件
<div classs="parent">
<child @getinfo="myname" :userinfo="usermessage"></child>
<div>
export default {

 data(){     return {         usermessage:'我是父亲'     } }, methods:{     myname(name){         console.log('我的名字叫'+name)     } }

}

//子组件
<div classs="child">
起源：{{userinfo}}
<button @click="getname">显示我的名字</button>
<div>
export default {

 props:['userinfo'], methods:{     getname(){       this.$emit('getinfo','bilibili')     } }

}兄弟组件通信
首先建设一个vue实例空白页（js文件）
import Vue from 'vue'
export default new Vue()组件a（数据发送方）通过应用 $emit 自定义事件把数据带过来
<template>

<div>    <span>A组件->{{msg}}</span>    <input type="button" value="把a组件数据传给b" @click ="send"></div>

</template>
<script>
import vmson from "../../../util/emptyVue"
export default {

data(){    return {        msg:{            a:'111',            b:'222'        }    }},methods:{    send:function(){        vmson.$emit("aevent",this.msg)    }}

}
</script>组件b（数据接管方）应用而通过 $on监听自定义事件的callback接收数据
<template>
<div>

<span>b组件,a传的的数据为->{{msg}}</span>

</div>
</template>
<script>

  import vmson from "../../../util/emptyVue"  export default {     data(){            return {                msg:""            }        },     mounted(){        vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要应用箭头函数;           console.log(val);//打印后果：我是a组件的数据           this.msg = val;        })      }}

</script>11、vue的路由模式及区别？
hash模式在浏览器中符号“#”，#以及#前面的字符称之为hash，用window.location.hash读取；
特点：hash尽管在URL中，但不被包含在HTTP申请中；用来领导浏览器动作，对服务端平安无用，hash不会重加载页面。
history模式：history采纳HTML5的新个性；
提供了两个新办法：pushState（），replaceState（）能够对浏览器历史记录栈进行批改，以及popState事件的监听到状态变更。history 模式下，前端的 URL必须和理论向后端发动申请的URL统一，否则会报404谬误
12、vue与react、angular的比拟？
Vue
轻量级框架：只关注视图层，是一个构建数据的视图汇合，大小只有几十kb；
简略易学：国人开发，中文文档，不存在语言障碍 ，易于了解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简略；
组件化：保留了react的长处，实现了html的封装和重用，在构建单页面利用方面有着独特的劣势；
视图，数据，构造拆散：使数据的更改更为简略，不须要进行逻辑代码的批改，只须要操作数据就能实现相干操作；
虚构DOM：dom操作是十分消耗性能的， 不再应用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种形式；
运行速度更快:相比拟与react而言，同样是操作虚构dom，就性能而言，vue存在很大的劣势。
React
相同点：React采纳非凡的JSX语法，Vue.js在组件开发中也推崇编写.vue非凡文件格式，对文件内容都有一些约定，两者都须要编译后应用；中心思想雷同：一切都是组件，组件实例之间能够嵌套；都提供正当的钩子函数，能够让开发者定制化地去解决需要；都不内置列数AJAX，Route等性能到外围包，而是以插件的形式加载；在组件开发中都反对mixins的个性。
不同点：React采纳的Virtual DOM会对渲染进去的后果做脏查看；Vue.js在模板中提供了指令，过滤器等，能够十分不便，快捷地操作Virtual DOM。
Angular
相同点：都反对指令：内置指令和自定义指令；都反对过滤器：内置过滤器和自定义过滤器；都反对双向数据绑定；都不反对低端浏览器。
不同点：AngularJS的学习老本高，比方减少了Dependency Injection个性，而Vue.js自身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏查看，所以Watcher越多越慢；Vue.js应用基于依赖追踪的察看并且应用异步队列更新，所有的数据都是独立触发的。
13、vue-roter的钩子函数？
vue路由钩子大抵能够分为三类:
全局钩子
次要包含beforeEach和aftrEach,beforeEach函数有三个参数：
to:router行将进入的路由对象
from:以后导航行将来到的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
afterEach函数不必传next()函数这类钩子次要作用于全局,个别用来判断权限,以及以及页面失落时候须要执行的操作,例如:
//应用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {

const role = localStorage.getItem('ms_username');if(!role && to.path !== '/login'){    next('/login');}else if(to.meta.permission){    // 如果是管理员权限则可进入，这里只是简略的模仿管理员权限而已    role === 'admin' ? next() : next('/403');}else{    // 简略的判断IE10及以下不进入富文本编辑器，该组件不兼容    if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){        Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，        请应用更高版本的浏览器查看', '浏览器不兼容告诉', {            confirmButtonText: '确定'        });    }else{        next();    }}

})2）单个路由外面的钩子
次要用于写某个指定路由跳转时须要执行的逻辑
3）组件路由
次要包含beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave,这几个钩子都是写在组件外面也能够传三个参数(to,from,next),作用与后面相似.
beforeRouteEnter(to, from, next) {

next(vm => {  if (    vm.$route.meta.hasOwnProperty('auth_key') &&    vm.$route.meta.auth_key != ''  ) {    if (!vm.hasPermission(vm.$route.meta.auth_key)) {      vm.$router.replace('/admin/noPermission')    }  }})

}14、vuex的应用？
Vuex 是一个专为 Vue.js 利用程序开发的状态管理模式。它采纳集中式存储管理利用的所有组件的状态，并以相应的规定保障状态以一种可预测的形式发生变化，具体包含：
1）state：Vuex 应用繁多状态树,即每个利用将仅仅蕴含一个store 实例，但繁多状态树和模块化并不抵触。寄存的数据状态，不能够间接批改外面的数据。
2）getter：state的计算属性，相似vue的计算属性，次要用来过滤一些数据。
3）action：actions能够了解为通过将mutations外面处里数据的办法变成可异步的解决数据的办法，简略的说就是异步操作数据。view 层通过 store.dispath 来散发 action。能够异步函数调用
4）mutation：mutations定义的办法动静批改Vuex 的 store 中的状态或数据
5）modules：我的项目特地简单的时候，能够让每一个模块领有本人的state、mutation、action、getters,使得构造十分清晰，方便管理。
15、vue的filter的了解与用法？
1）全局过滤器必须写在vue实例创立之前
Vue.filter('testfilter', function (value,text) { // 返回解决后的值
return value+text
})2）部分写法：在组件实例对象里挂载。
filters: {

    changemsg:(val,text)\=>{ return val + text    }}3）应用形式：只能应用在{{}}和：v-bind中，定义时第一个参数固定为预处理的数，前面的数为调用时传入的参数，调用时参数第一个对应定义时第二个参数，顺次往后类推

<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>
//多个过滤器也能够串行应用
<h2>{{name|filter1|filter2|filter3}}</h2>4）vue-cli我的项目中注册多个全局过滤器写法：
//1.创立一个独自的文件定义并裸露函数对象
const filter1 = function (val) {
return val + '--1'
}
const filter2 = function (val) {
return val + '--2'
}
const filter3 = function (val) {
return val + '--3'
}

export default {
filter1,
filter2,
filter3
}

//2.导入main.js(在vue实例之前)
import filters from './filter/filter.js'

//3.循环注册过滤器
Object.keys(filters).forEach(key=>{
Vue.filter(key,filters[key])
})16、vue的keep-alive的了解？
keep-alive 是Vue内置的一个组件，能够使被蕴含的组件保留状态，或防止从新渲染，页面第一次进入，钩子的触发程序:created-> mounted-> activated，退出时触发 deactivated ,当再次进入（后退或者后退）时，只触发activated事件挂载的办法等，只执行一次的放在 mounted 中；组件每次进去执行的办法放在 activated 中；其有几个属性如下：
1）include - 字符串或正则表达式，只有名称匹配的组件会被缓存
2）exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
3）include 和 exclude 的属性容许组件有条件地缓存。二者都能够用“，”分隔字符串、正则表达式、数组。当应用正则或者是数组时，要记得应用v-bind 。
<!-- 逗号分隔字符串，只有组件a与b被缓存。-->
<keep-alive include="a,b">
<component></component>
</keep-alive>

<!-- 正则表达式 (须要应用 v-bind，合乎匹配规定的都会被缓存) -->
<keep-alive :include="/a|b/">
<component></component>
</keep-alive>

<!-- Array (须要应用 v-bind，被蕴含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
<component></component>
</keep-alive>17、如何封装一个vue组件？
依据业务需要，建设组件的模板，先把架子搭起来，写写款式，思考好组件的根本逻辑。
筹备好组件的数据输出。即剖析好逻辑，定好 props 外面的数据、类型。
筹备好组件的数据输入。即依据组件逻辑，做好要裸露进去的办法。
封装结束了，间接调用即可
18、vue首屏白屏如何解决？
1）路由懒加载
2）vue-cli开启打包压缩 和后盾配合 gzip拜访
3）进行cdn减速
4）开启vue服务渲染模式
5）用webpack的externals属性把不须要打包的库文件拆散进来，缩小打包后文件的大小
6）在生产环境中删除掉不必要的console.log
plugins: [

new webpack.optimize.UglifyJsPlugin({ //增加-删除console.log  compress: {    warnings: false,    drop_debugger: true,    drop_console: true  },  sourceMap: true}),7）开启nginx的gzip ,在nginx.conf配置文件中配置

http { //在 http中配置如下代码，
gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 8; #压缩级别
gzip_buffers 16 8k;
#gzip_http_version 1.1;
gzip_min_length 100; #不压缩临界值
gzip_types text/plain application/javascript application/x-javascript text/css

application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

}8）增加loading成果，给用户一种进度感触
19、vue中的v-cloak的了解？
应用 v-cloak 指令设置款式，这些款式会在 Vue 实例编译完结时，从绑定的 HTML 元素上被移除。
个别用于解决网页闪屏的问题，在对一个的标签中应用v-cloak，而后在款式中设置[v-cloak]款式,[v-cloak]需写在 link 引入的css中，或者写一个内联css款式，写在import引入的css中不起作用。
20、vue中template编译的了解？
答：就是先转化成AST树，再失去的render函数返回VNode（Vue的虚构DOM节点），具体为：
首先，通过compile编译器把template编译成AST语法树（abstract syntax tree 即 源代码的形象语法结构的树状表现形式），compile是createCompiler的返回值，createCompiler是用以创立编译器的。
另外compile还负责合并option。
而后，AST会通过generate（将AST语法树转化成render funtion字符串的过程）失去render函数，render的返回值是VNode，VNode是Vue的虚构DOM节点，外面有（标签名、子节点、文本等等）
21、v-model的了解？
答：v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背地就做了两个操作：
1）v-bind绑定一个value属性；
2）v-on指令给以后元素绑定input事件
22、computed和watch的用法和区别？
computed
1）变量不在 data中定义，而是定义在computed中，写法跟写办法一样，有返回值。函数名间接在页面模板中渲染，不加小括号 。
2）依据传入的变量的变动 进行后果的更新。
3）计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因而进步了程序的性能。而methods中每调用一次就会从新计算一次，为了进行不必要的资源耗费，抉择用计算属性。
watch
1）计算属性的时候 初始化的时候就能够被监听到并且计算 然而watch是产生扭转的时候才会触发。
2）当有一些数据须要随着其它数据变动而变动时，或者当须要在数据变动时执行异步或开销较大的操作时，应用 watch。
总结：
1）计算属性变量在computed中定义，属性监听在data中定义。
2）计算属性是申明式的形容一个值依赖了其余值，依赖的值扭转后从新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行绝对应的函数。
23、$nextTick的应用？
答：在vue中了解批改数据后，对应的dom须要肯定的工夫进行更新，因而为了可能精确的后去更新后的dom，能够采纳提早回调的办法进行更新dom的获取，所以呈现了$nextTick来进行提早回调。即：在下次 DOM 更新循环完结之后执行提早回调。在批改数据之后立刻应用这个办法，获取更新后的 DOM。
24、data为什么是一个函数？
答：这是有JavaScript的个性所导致，在component中，data必须以函数的模式存在，不能够是对象。
组建中的data写成一个函数，数据以函数返回值的模式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有本人公有的数据空间，它们只负责各自保护的数据，不会造成凌乱。而单纯的写成对象模式，就是所有的组件实例共用了一个data，这样改一个全都改了。
25、vue单页面和传统的多页面区别？
单页面利用（SPA）
艰深一点说就是指只有一个主页面的利用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都蕴含在这个所谓的主页面中。但在写的时候，还是会离开写（页面片段），而后在交互的时候由路由程序动静载入，单页面的页面跳转，仅刷新部分资源。多利用于pc端。
多页面（MPA）
指一个利用中有多个页面，页面跳转时是整页刷新
单页面的长处：
用户体验好，快，内容的扭转不须要从新加载整个页面，基于这一点spa对服务器压力较小；前后端拆散；页面成果会比拟炫酷（比方切换页面内容时的专场动画）。
单页面毛病：
不利于seo；导航不可用，如果肯定要导航须要自行实现后退、后退。（因为是单页面不能用浏览器的后退后退性能，所以须要本人建设堆栈治理）；首次加载时耗时多；页面复杂度进步很多。
26、vue罕用的修饰符？
.stop：等同于JavaScript中的event.stopPropagation()，避免事件冒泡；.prevent：等同于JavaScript中的event.preventDefault()，避免执行预设的行为（如果事件可勾销，则勾销该事件，而不进行事件的进一步流传）；.capture：与事件冒泡的方向相同，事件捕捉由外到内；.self：只会触发本人范畴内的事件，不蕴含子元素；.once：只会触发一次。
27、vue更新数组时触发视图更新的办法？
答：push()；pop()；shift()；unshift()；splice()；sort()；reverse()
28、route和router的区别？
$router
router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数失去一个router的实例对象，这个对象中是一个全局的对象，他蕴含了所有的路由蕴含了许多要害的对象和属性,常见的有：
1）push：向 history 栈增加一个新的记录，当咱们点击浏览器的返回按钮时能够看到之前的页面
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查问参数，变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})2）go：页面路由跳转 后退或者后退
// 页面路由跳转 后退或者后退
this.$router.go(-1) // 后退3）replace：push办法会向 history 栈增加一个新的记录，而replace办法是替换以后的页面，不会向 history 栈增加一个新的记录
$route
&dollar;route对象示意以后的路由信息，蕴含了以后URL解析失去的信息。蕴含以后的门路、参数、query对象等。
1）&dollar;route.path：字符串，对该当前路由的门路，总是解析为绝对路径，如 "/foo/bar"。
2）&dollar;route.params：一个 key/value 对象，蕴含了 动静片段 和 全匹配片段，如果没有路由参数，就是一个空对象。
3）&dollar;route.query：一个 key/value 对象，示意 URL 查问参数。例如，对于门路 /foo?user=1，则有 $route.query.user == 1，如果没有查问参数，则是个空对象。
4）&dollar;route.hash：以后路由的 hash 值 (不带#) ，如果没有 hash 值，则为空字符串。
5.&dollar;route.fullPath：实现解析后的 URL，蕴含查问参数和 hash 的残缺门路。
6&dollar;route.matched：数组，蕴含以后匹配的门路中所蕴含的所有片段所对应的配置参数对象。
7.&dollar;route.name：以后门路名字
8.&dollar;route.meta：路由元信息
29、vue-router实现懒加载的形式？
vue异步组件
vue异步组件技术 ==== 异步加载
vue-router配置路由 , 应用vue的异步组件技术 , 能够实现按需加载 。然而,这种状况下一个组件生成一个js文件
/ vue异步组件技术 /
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'],resolve)
},{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'],resolve)
},{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'],resolve)
}es提案的import()
路由懒加载(应用import)
// 上面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 上面2行代码，指定了雷同的webpackChunkName，会合并打包成一个js文件。把组件按组分块
const Home = () => import(/ webpackChunkName: 'ImportFuncDemo' / '@/components/home')
const Index = () => import(/ webpackChunkName: 'ImportFuncDemo' / '@/components/index')
const About = () => import(/ webpackChunkName: 'ImportFuncDemo' / '@/components/about'){
path: '/about',
component: About
}, {
path: '/index',
component: Index
}, {
path: '/home',
component: Home
}webpack的require,ensure()
vue-router配置路由，应用webpack的require.ensure技术，也能够实现按需加载。这种状况下，多个路由指定雷同的chunkName，会合并打包成一个js文件。
/ 组件懒加载计划三: webpack提供的require.ensure() /
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {
path: '/about',
name: 'about',
component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}30、delete和Vue.delete删除数组的区别？
答：delete只是被删除的元素变成了 empty/undefined 其余的元素的键值还是不变。Vue.delete 间接删除了数组 扭转了数组的键值。
31、路由跳转和location.href的区别？
应用location.href='/url'来跳转，简略不便，然而刷新了页面；
应用路由形式跳转，无刷新页面，动态跳转；
32、vue的solt的用法？
在子组件内应用非凡的＜slot>元素就能够为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将代替子组件的＜slot> 标签及它的内容。
简略说来就是：在子组件外部用 <slot></slot>标签占位，当在父组件中应用子组件的时候，咱们能够在子组件中插入内容，而这些插入的内容则会替换 <slot></slot>标签的地位。
当然：单个solt的时候能够不对solt进行命名，如果存在多个 则一个能够不命名，其余必须命名，在调用的时候指定名称的对应替换slot，没有指定的则间接默认无名称的solt
33、$emit 、$on 、$once 、$off了解？
$emit
触发以后实例上的自定义事件（并将附加参数都传给监听器回调）
$on
监听实例上自定义事件并调用回调函数，监听emit触发的事件
$once
监听一个自定义事件，然而只触发一次，在第一次触发之后移除监听器。
$off
用来移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。
这四个办法的实现原理是：通过对vue实例挂载，而后别离应用对象存储数组对应的函数事件，其中emit通过循环查找存储的数组中对应的函数进行调用，once只匹配一次就就完结，on是将对应的函数存储到数组中，off是删除数组中指定的元素或者所有的元素事件。具体能够参考文章：VUEemit实现
34、$root、$refs、$parent的应用？
$root
能够用来获取vue的根实例，比方在简略的我的项目中将公共数据放再vue根实例上(能够了解为一个全局 store ),因而能够代替vuex实现状态治理；
$refs
在子组件上应用ref个性后，this.属性能够间接拜访该子组件。能够代替事件emit 和$on 的作用。
应用形式是通过ref个性为这个子组件赋予一个ID援用，再通过this.$refs.testId获取指定元素。
留神：$refs只会在组件渲染实现之后失效，并且它们不是响应式的。这仅作为一个用于间接操作子组件的“逃生舱”——你应该防止在模板或计算属性中拜访$refs。
$parent
$parent属性能够用来从一个子组件拜访父组件的实例，能够代替将数据以 prop 的形式传入子组件的形式；当变更父级组件的数据的时候，容易造成调试和了解难度减少；
35、vue开发遇到的问题？
1）款式净化
答：在编写款式中，如果须要避免款式的净化，能够应用两种形式，一种是在组件的根元素上减少一个惟一的class或者id，而后在编写组件的款式时候在根元素对应的class或者id下进行编写；另一种形式是在对应的style上增加scoped关键字，不过该关键字对援用的框架UI有效
2）router-link在安卓上不起作用
答：不起作用的起因是因为转码编译的问题，能够应用babel来进行解决，装置babel polypill插件解决
3）初始化页面呈现闪屏乱码的问题
答：这是因为vue还没有解析的状况下会容易呈现花屏景象，看到相似于{{data}}的字样，能够应用两种形式来进行解决，一种为：在设置index.html的根元素的元素的款式为display:none，而后在mounted中的$nextTick函数中display:block展现；另一种形式是应用vue的内置指令：v-cloak,并且在css中设置款式
[v-cloak] {

display: none;

}
4）router-link上事件有效解决办法
答：应用@click.native来进行调用原生的js事件。起因：router-link会阻止click事件，.native指间接监听一个原生事件。