vue经典面试题

0、讲一下什么是MVVM

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。

1、简单说一下Vue2.x响应式数据原理

Vue在初始化数据时，会使用Object.defineProperty重新定义data中的所有属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

2、简单说一下Vue3.x响应数据原理

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一，才有可能执行trigger。

3、vue2.x中如何监听数组的变化

使用函数劫持的方式，重写了数组方法，vue将data中的数组进行了原型链的重写，指向自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新,如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控，这样就实现了监测数组变化。

4、nextTick知道吗？实现原理是什么

在下次DOM更新循环结束之后执行延迟回调，nextTick主要使用了宏任务和微任务，根据执行环境分别常尝试采用。

• Promise
• MutationObserver
• setImmediate
• 如果以上均不行就采用setTimeout
  定义了一部方法，多次调用nextTick会将方法存到队列中，通过异步方法清空当前队列。

5、谈谈Vue的生命周期

beforeCreate是new Vue()之后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例创建完成后发生，当前阶段已经完成了数据观测，也就是可以使用数据，更改数据，在这里更改数据不会触发updated函数。可以做一些初始数据的获取，在当前阶段无法与Dom进行交互，如果非要想，可以通过vm.$nextTick来访问Dom。

beforeMount发生在挂载之前，在这之前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经创建完成，即将开始渲染。在此时也可以对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，可以访问到Dom节点，使用$refs属性对Dom进行操作。

beforeUpdate发生在更新之前，也就是响应式数据发生更新，虚拟dom重新渲染之前被触发，你可以在当前阶段进行更改数据，不会造成重渲染。

updated发生在更新完成之后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，因为这可能会导致无限循环的更新。

beforeDestroy发生在实例销毁之前，在当前阶段实例完全可以被使用，我们可以在这时进行善后收尾工作，比如清除计时器。

destroyed发生在实例销毁之后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。

6、对接口的请求一般放在哪个生命周期中？

接口请求一般放在mounted中，但是要注意的是服务端渲染时不支持mounted,需要放到crested中。

7、说一下Computed和watch

computed: {
      ...mapGetters(['userType'])
    },

computed: {
        scopedRules() {
          let validatePin = (rule,value,callback)=> {
              if(value != this.pinForm.newPin){
                callback(new Error('两次口令不一致'));
              }
              else{
                callback();
              }
          };
          let validatePwd = (rule,value,callback)=> {
            if(value != this.pwdForm.newPwd){
              callback(new Error('两次密码不一致'));
            }
            else{
              callback();
            }
          };
          return Object.assign({
            oldPin:[
              {required:true,message:'不能为空',trigger:'blur'},
              {pattern:/^[0-9]{6,16}$/,message:'安全口令为6到16位的数字',trigger:'blur'},
            ]
          },this.myRules)
        }
      },

Computed本质是具备缓存的watcher，依赖的属性发生变化就会更新视图，适用于计算比较消耗性能的计算场景，当表达式过于复杂时候，在模板中放入过多的逻辑会使模板难以维护，可以将复杂的逻辑放入计算属性中处理，

watch****没有缓存性，更多的是观察作用，可以监听到某些数据执行回调，当我们需要深入监听对象的属性时，可以打开deep:true选项，这样便会对对象中的每一项进行监听，这样hi带来性能问题，优化的话，可以使用字符串形式监听，如果没写写到组件中，不要忘记使用unWatch手动注销。

例子： 是监听newWarn对象的alertType属性。

 watch:{
      newWarn:{
        handler:function(val, oldVal){
          if(this.newWarn.alertType == 305){
            this.warnTypeChoose = 2;
           }else{
            this.warnTypeChoose = 3;
          }
        },
        deep: true
      },
    },

8、说一下v-if与v-show的区别

当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式，切换当前的DOM是显示还是隐藏。

9、数组中的data为什么是个函数

data(){
      return{
        RSUInfo:{},
        handActive:true,
      }

一个数组被多次复用的话，也就会创建多个实例，实质上，这些实例用的都是同一个构造函数，如果data是对象的话，对象属于引用类型，会影响到所有的实例
为了保证组件不同的实例之间data不冲突，data必须是一个函数。

10、说一下v-model的原理

v-model本质是一个语法糖，可以看成value_input方法的语法糖，可以通过model属性的prop和event属性来进行定义，原生的v-model，会根据标签的不同生成不同的事件和属性。

11、vue事件绑定原理说一下。

原生事件绑定是 通过addEventListener绑定给真是元素的，组件事件绑定是通过Vue自定义的$on实现的。

<span @click="handout()" class="tabInfo" :class="{'active':handActive}">平台下发预警</span>

12、vue模板编译原理

简单的说，vue的编译过程就是将template转化为render函数的过程，会经历以下阶段。

• 生成AST树
• 优化
• codegen

首先解析模板，生成AST语法树（一种用Javascript对象的形式来描述整个模板）使用大量的正则表达式对模板进行解析，遇到标签，文本的时候都会执行对应的钩子进行相关处理。
vue的数据是响应的，但其实模板中并不是所有的数据都是响应的，有些数据首次渲染后就不会再变化，对应的dom也不会变化，那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记，这些被标记的节点我们就可以跳过它们的对比，对运行时的模板起到很大的优化作用。
编译的最后一步是 将优化后的AST树转换为可执行的代码。

13、vue2.x和vue3.x渲染器的diff算法分别说一下

简单来讲，diff算法有以下过程

1. 同级比较，再比较子节点
2. 先判断一方有子节点一方没有子节点的情况
3. 比较都有子节点的情况(核心diff)
4. 递归比较子节点

正常Diff两个树的时间复杂度是O(n^3)， 但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。
Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。
Vue3.x借鉴了ivi算法和 inferno算法在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)
该算法中还运用了动态规划的思想求解最长递归子序列。
(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)

14、说一下虚拟Dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的，频繁的操作DOM会产生一定的性能问题，这是虚拟DOM产生的原因。

Vue2的 Virtual DOM借鉴了开源snabbdom的实现。

Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真是的DOM的一层抽象。

VirtualDOM映射到真实的DOM要经理VNode的create,diff，patch等阶段。

key的作用是尽可能的复用DOM元素

新旧children中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的

需要在新旧children的节点中保存映射关系，以便能够在旧children得节点中找到可复用的节点，key业绩居士children中节点的唯一标识。

15、keep-alive了解吗？

keep-alive可以实现组件缓存，当组件切换时候不会对当前组件进行卸载。
常用的两个属性 include/exclude,允许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了LRU(Least Recently Used)算法。

<template>
    <el-container>
        <el-header/>
        <el-container>
            <Aside></Aside>
            <el-main>
                <transition>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

这里就运用到了keep-alive 用来防止组件重复加载，浪费资源。用于切换数据不怎么变化的页面，这样使用mounted中的接口请求不会在切换页面的时候触发。

16.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程

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

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17、vue2.x组件通信有哪些方式

父子组件通信

父->子props，子->父 $on、$emit

获取父子组件实例 $parent、$children

Ref 获取实例的方式调用组件的属性或者方法

Provide、inject 官方不推荐使用，但是写组件库时很常用

兄弟组件通信

Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue

Vuex

跨级组件通信

Vuex

$attrs、$listeners

Provide、inject

18、了解SSR吗？

SSR也是服务端渲染，也就是讲Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把HTML直接返回给客户端。

SSR有着更好的SEO，并且首屏加载速度更快等优点，不过也有一些缺点，比如我们开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当我们需要一些外部扩展库时需要特殊处理，服务端渲染应用程序也需要处于Node.js的运行环境，还有就是服务器会有更大的负载要求。

19、vue的性能优化包含哪些

编码阶段

1. 尽量减少data中的数据，data中的数据会增加getter和setter，会收集对应的watcher
2. v-if 和 v-for不能连用
3. 如果需要使用v-for给每项元素绑定事件时使用事件代理
4. SPA使用keep-alive缓存组件
5. 在更多情况下，使用v-if代替v-show
6. key保证唯一
7. 使用路由懒加载、异步组件
8. 防抖、节流
9. 第三方模块按需导入
10. 长列表滚动到可视区域动态加载
11. 图片懒加载

SEO优化

1. 预渲染
2. 服务端渲染SSR

打包优化

1. 压缩代码
2. Tree Shaking/Scope Hoisting
3. 使用Cdn加载第三方模块
4. 多线程打包happypack
5. splitChunks抽离公共文件
6. sourceMap优化

用户体验

1. 骨架屏

2. pwa
   

3. 还可以使用缓存优化，服务端开启gzip压缩等

20、hash路由和history路由原理

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()

参考

之前再掘金上看到童欧巴的这篇文章，看了很多遍，感觉语言通俗易懂，对于准备Vue面试的同学很有帮助，结合自己的代码，整理了这个原文摘自 https://juejin.im/post/6844904084374290446#heading-14