42道vue常见面试题你悟了吗？灵魂发问~

1、讲述下vue的MVVM的理解

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：

Model代表数据模型：主要用于定义数据和操作的业务逻辑。泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。

View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。前端主要由 HTML 和 CSS 来构建 。

ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉。

需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。

这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

2、vue的生命周期及理解

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

创建前/后： 在beforeCreated阶段：vue实例的挂载元素$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、指令、过滤器 ……都是处于不可用状态。组件已经被销毁了。

（keep-alive后面会说到的0.0）

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。

正确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。

高效：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，源码如下：

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

6、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,具体参数讲解如下：

• el指令所绑定的元素 可以直接操组dom元素
• binding一个对象，具体包括以下属性：
  • name：定义的指令名称 不包括v-
  • value：指令的绑定值，如果绑定的是一个计算式，value为对应计算结果
  • oldvalue：指令绑定元素的前一个值，只对update和componentUpdated钩子函数有值
  • expression：指令绑定的原始值 不对值进行任何加工
  • arg：传递给指令的参数
  • modifiers：指令修饰符，如：v-focus.show.async 则接收的modifiers为｛show：true，async：true｝
• vnode：vue编译生成的虚拟dom
• oldVnode：上一个vnode，只在update和componentUpdated钩子函数中有效

如果不需要其他钩子函数，可以直接简写为：directive(“focus”,function(el,binding){})

7、vue的实现原理

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

具体步骤：

第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter

这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化

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

第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:

• 1、在自身实例化时往属性订阅器(dep)里面添加自己
• 2、自身必须有一个update()方法
• 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

8、vue的diff算法理解

diff算法的作用：用来修改dom的一小段，不会引起dom树的重绘。

diff算法的实现原理：diff算法将virtual dom的某个节点数据改变后生成的新的vnode与旧节点进行比较，并替换为新的节点，具体过程就是调用patch方法，比较新旧节点，一边比较一边给真实的dom打补丁进行替换。

具体过程详解：
a、在采用diff算法进行新旧节点进行比较的时候，比较是按照在同级进行比较的，不会进行跨级比较：

b、当数据发生改变的时候，set方法会调用dep.notify通知所有的订阅者watcher，订阅者会调用patch函数给响应的dom进行打补丁，从而更新真实的视图。

c、patch函数接受两个参数，第一个是旧节点，第二个是新节点，首先判断两个节点是否值得比较，值得比较则执行patchVnode函数，不值得比较则直接将旧节点替换为新节点。如果两个节点一样就直接检查对应的子节点，如果子节点不一样就说明整个子节点全部改变不再往下对比直接进行新旧节点的整体替换。

d、patchVnode函数：找到真实的dom元素；判断新旧节点是否指向同一个对象，如果是就直接返回；如果新旧节点都有文本节点，那么直接将新的文本节点赋值给dom元素并且更新旧的节点为新的节点；如果旧节点有子节点而新节点没有，则直接删除dom元素中的子节点；如果旧节点没有子节点，新节点有子节点，那么直接将新节点中的子节点更新到dom中；如果两者都有子节点，那么继续调用函数updateChildren。

e、updateChildren函数：抽离出新旧节点的所有子节点，并且设置新旧节点的开始指针和结束指针，然后进行两者比较，从而更新dom（调整顺序或者插入新的内容 结束后删掉多余的内容）。

9、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>

10、vue的路由模式及区别

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

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式：history采用HTML5的新特性；

提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。history 模式下，前端的 URL必须和实际向后端发起请求的URL一致，否则会报404错误。

11、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使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

12、vue-roter的钩子函数

vue路由钩子大致可以分为三类:
1、全局钩子
主要包括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')
        }
      }
    })
  }

13、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,使得结构非常清晰，方便管理。

14、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])
})

15、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>

16、如何封装一个vue组件

根据业务需求，建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。

准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

封装完毕了，直接调用即可。

17、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效果，给用户一种进度感受

18、vue中的v-cloak的理解

使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

一般用于解决网页闪屏的问题，在对一个的标签中使用v-cloak，然后在样式中设置[v-cloak]样式,[v-cloak]需写在 link 引入的css中，或者写一个内联css样式，写在import引入的css中不起作用。

19、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节点，里面有（标签名、子节点、文本等等）

20、v-model的理解

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：

1）v-bind绑定一个value属性；
2）v-on指令给当前元素绑定input事件

21、computed和watch的用法和区别

computed

1）变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号 。
2）根据传入的变量的变化 进行结果的更新。
3）计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性。

watch
1）计算属性的时,初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
2）当有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，使用 watch。

总结：

1）计算属性变量在computed中定义，属性监听在watch中定义。
2）计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。

22、$nextTick的使用

在vue中理解修改数据后，对应的dom需要一定的时间进行更新，因此为了能够准确地获取更新后的dom，可以采用延迟回调的方法进行更新dom的获取，所以出现了$nextTick来进行延迟回调。即：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

23、data为什么是一个函数

这是由JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

24、vue单页面和传统的多页面区别

单页面应用（SPA）

通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。

多页面（MPA）

指一个应用中有多个页面，页面跳转时是整页刷新。

单页面的优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染，基于这一点spa对服务器压力较小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；；

页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：

不利于seo，由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势；

导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；

初次加载时耗时多，为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

页面复杂度提高很多。

25、vue常用的修饰符

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；

.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；

.capture：与事件冒泡的方向相反，事件捕获由外到内；

.self：只会触发自己范围内的事件，不包含子元素；

.once：只会触发一次。

26、vue更新数组时触发视图更新的方法

push()；pop()；shift()；unshift()；splice()；sort()；reverse()

27、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

$route对象表示当前的路由信息，包含了当前URL解析得到的信息。包含当前的路径、参数、query对象等。

1）$route.path：字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。

2）$route.params：一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。

3）$route.query：一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

4）$route.hash：当前路由的 hash 值 (不带#) ，如果没有 hash 值，则为空字符串。

5.$route.fullPath：完成解析后的 URL，包含查询参数和 hash 的完整路径。

6$route.matched：数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

7.$route.name：当前路径名字。

8.$route.meta：路由元信息。

28、delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。

29、路由跳转和location.href的区别

使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用路由方式跳转，无刷新页面，静态跳转。

30、vue的solt的用法

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot> 标签及它的内容。

简单说来就是：在子组件内部用 <slot></slot>标签占位，当在父组件中使用子组件的时候，我们可以在子组件中插入内容，而这些插入的内容则会替换 <slot></slot>标签的位置。

当然，单个slot的时候可以不对slot进行命名，如果存在多个，则一个可以不命名，其他必须命名，在调用的时候指定名称的对应替换slot，没有指定的则直接默认无名称的slot。

31、$emit 、 $on 、 $once 、 $off理解

$emit

触发当前实例上的自定义事件（并将附加参数都传给监听器回调）

$on

监听实例上自定义事件并调用回调函数，监听emit触发的事件

$once

监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器。

$off

用来移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。

这四个方法的实现原理是：通过对vue实例挂载，然后分别使用对象存储数组对应的函数事件，其中emit通过循环查找存储的数组中对应的函数进行调用，once只匹配一次就就结束，on是将对应的函数存储到数组中，off是删除数组中指定的元素或者所有的元素事件。

32、$root、 $refs、 $parent的使用

$root

可以用来获取vue的根实例，比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store),因此可以代替vuex实现状态管理

$refs

在子组件上使用ref特性后，this.属性可以直接访问该子组件。可以代替事件emit 和$on 的作用。

使用方式是通过ref特性为这个子组件赋予一个ID引用，再通过this.$refs.testId获取指定元素。

注意：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问$refs。

$parent

$parent属性可以用来从一个子组件访问父组件的实例，可以替代将数据以 prop 的方式传入子组件的方式；当变更父级组件的数据的时候，容易造成调试和理解难度增加。

33、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指直接监听一个原生事件。

34、怎样理解 vue 的单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :

• 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

• 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

35、直接给一个数组项赋值，Vue 能检测到变化吗

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

• 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice
vm.items.splice(newLength)

36、vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

• 加载渲染过程
  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程
  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
• 父组件更新过程
  父 beforeUpdate -> 父 updated
• 销毁过程
  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

37、在哪个生命周期内调用异步请求

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading 时间；
• ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

38、使用过 Vue SSR 吗？说说 SSR

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下：
（1）服务端渲染的优点：

• 更好的 SEO：因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；
• 更快的内容到达时间（首屏加载更快）：SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

• 更多的开发条件限制：例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；
• 更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

39、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗

vue-router 有 3 种路由模式：hash、history、abstract，对应的源码如下所示：

switch (mode) {
  case 'history':
  this.history = new HTML5History(this, options.base)
  break
  case 'hash':
  this.history = new HashHistory(this, options.base, this.fallback)
  break
  case 'abstract':
  this.history = new AbstractHistory(this, options.base)
  break
  default:
  if (process.env.NODE_ENV !== 'production') {
    assert(false, `invalid mode: ${mode}`)
  }
}

其中，3 种路由模式的说明如下：

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
• history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
• abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

（1）hash 模式的实现原理
早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 ‘#search’：

https://www.word.com#search

hash 路由模式的实现主要是基于下面几个特性：

• URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
• hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
• 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
• 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理
HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

history 路由模式的实现主要基于存在下面几个特性：

• pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
• 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
• history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

40、Vue 是如何实现数据双向绑定的

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据，如下图所示：

即：

• 输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。
• Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。

其中，View 变化更新 Data ，可以通过事件监听的方式来实现，所以 Vue 的数据双向绑定的工作主要是如何根据 Data 变化更新 View。

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

41、你有对 Vue 项目进行哪些优化

（1）代码层面的优化

• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
• 长列表性能优化
• 事件的销毁
• 图片资源懒加载
• 路由懒加载
• 第三方插件的按需引入
• 优化无限列表性能
• 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

• Webpack 对图片进行压缩
• 减少 ES6 转为 ES5 的冗余代码
• 提取公共代码
• 模板预编译
• 提取组件的 CSS
• 优化 SourceMap
• 构建结果输出分析
• Vue 项目的编译优化

（3）基础的 Web 技术的优化

• 开启 gzip 压缩
• 浏览器缓存
• CDN 的使用
• 使用 Chrome Performance 查找性能瓶颈

42、对于即将到来的 vue3.0 特性你有什么了解的吗

Vue 3.0 正走在发布的路上，Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大，因此 Vue 3.0 增加以下这些新特性：

（1）监测机制的改变

3.0 将带来基于代理 Proxy 的 observer 实现，提供全语言覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制：

• 只能监测属性，不能监测对象
• 检测属性的添加和删除；
• 检测数组索引和长度的变更；
• 支持 Map、Set、WeakMap 和 WeakSet。

Proxy 与 Object.defineProperty 优劣对比

• Proxy 可以直接监听对象而非属性；

• Proxy 可以直接监听数组的变化；

• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

• Object.defineProperty兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

新的 observer 还提供了以下特性：

• 用于创建 observable 的公开 API。这为中小规模场景提供了简单轻量级的跨组件状态管理解决方案。
• 默认采用惰性观察。在 2.x 中，不管反应式数据有多大，都会在启动时被观察到。如果你的数据集很大，这可能会在应用启动时带来明显的开销。在 3.x 中，只观察用于渲染应用程序最初可见部分的数据。
• 更精确的变更通知。在 2.x 中，通过 Vue.set 强制添加新属性将导致依赖于该对象的 watcher 收到变更通知。在 3.x 中，只有依赖于特定属性的 watcher 才会收到通知。
• 不可变的 observable：我们可以创建值的“不可变”版本（即使是嵌套属性），除非系统在内部暂时将其“解禁”。这个机制可用于冻结 prop 传递或 Vuex 状态树以外的变化。
• 更好的调试功能：我们可以使用新的 renderTracked 和 renderTriggered 钩子精确地跟踪组件在什么时候以及为什么重新渲染。

（2）模板

模板方面没有大的变更，只改了作用域插槽，2.x 的机制导致作用域插槽变了，父组件会重新渲染，而 3.0 把作用域插槽改成了函数的方式，这样只会影响子组件的重新渲染，提升了渲染的性能。

同时，对于 render 函数的方面，vue3.0 也会进行一系列更改来方便习惯直接使用 api 来生成 vdom 。

（3）对象式的组件声明方式

vue2.x 中的组件是通过声明的方式传入一系列 option，和 TypeScript 的结合需要通过一些装饰器的方式来做，虽然能实现功能，但是比较麻烦。

3.0 修改了组件的声明方式，改成了类式的写法，这样使得和 TypeScript 的结合变得很容易。

此外，vue 的源码也改用了 TypeScript 来写。其实当代码的功能复杂之后，必须有一个静态类型系统来做一些辅助管理。

现在 vue3.0 也全面改用 TypeScript 来重写了，更是使得对外暴露的 api 更容易结合 TypeScript。静态类型系统对于复杂代码的维护确实很有必要。

（4）其它方面的更改

vue3.0 的改变是全面的，上面只涉及到主要的 3 个方面，还有一些其他的更改：

• 支持自定义渲染器，从而使得 weex 可以通过自定义渲染器的方式来扩展，而不是直接 fork 源码来改的方式。
• 支持 Fragment（多个根节点）和 Protal（在 dom 其他部分渲染组建内容）组件，针对一些特殊的场景做了处理。
• 基于 treeshaking 优化，提供了更多的内置功能。