面试必备的13道能够触类旁通的Vue面试题

本文首发于微信公众号「程序员面试官」

前言

Vue框架部分咱们会涉及一些高频且有必定探讨价值的面试题,咱们不会涉及一些很是初级的在官方文档就能查看的纯记忆性质的面试题,好比:

• vue经常使用的修饰符?
• vue-cli 工程经常使用的 npm 命令有哪些？
• vue中 keep-alive 组件的做用?

首先,上述类型的面试题在文档中可查,没有比官方文档更权威的答案了,其次这种问题没有太大价值,除了考察候选人的记忆力,最后,这种面试题只要用过vue的都知道,没有必要占用咱们的篇幅.

咱们的问题并很少,可是难度可能会高一些,若是你真的搞懂了这些问题,在绝大多数状况下会有触类旁通的效果,能够说基本能拿下Vue相关的全部重要知识点了.

你对MVVM的理解?

MVVM是什么?

MVVM 模式，顾名思义即 Model-View-ViewModel 模式。它萌芽于2005年微软推出的基于 Windows 的用户界面框架 WPF ，前端最先的 MVVM 框架 knockout 在2010年发布。

Model 层: 对应数据层的域模型，它主要作域模型的同步。经过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。

View 层:做为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展现的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层作的是 数据绑定的声明、 指令的声明、 事件绑定的声明。

ViewModel 层:把 View 须要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会作好绑定属性的监听。当 ViewModel 中数据变化，View 层会获得更新；而当 View 中声明了数据的双向绑定（一般是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会获得自动更新。

MVVM的优缺点?

优势:

1. 分离视图（View）和模型（Model）,下降代码耦合，提升视图或者逻辑的重用性: 好比视图（View）能够独立于Model变化和修改，一个ViewModel能够绑定不一样的"View"上，当View变化的时候Model不能够不变，当Model变化的时候View也能够不变。你能够把一些视图逻辑放在一个ViewModel里面，让不少view重用这段视图逻辑
2. 提升可测试性: ViewModel的存在能够帮助开发者更好地编写测试代码
3. 自动更新dom: 利用双向绑定,数据更新后视图自动更新,让开发者从繁琐的手动dom中解放

缺点:

1. Bug很难被调试: 由于使用双向绑定的模式，当你看到界面异常了，有多是你View的代码有Bug，也多是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。另外，数据绑定的声明是指令式地写在View的模版当中的，这些内容是没办法去打断点debug的
2. 一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就形成了花费更多的内存
3. 对于大型的图形应用程序，视图状态较多，ViewModel的构建和维护的成本都会比较高

你对Vue生命周期的理解？

生命周期是什么

Vue 实例有一个完整的生命周期，也就是从开始建立、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，咱们称这是Vue的生命周期。

各个生命周期的做用

生命周期	描述
beforeCreate	组件实例被建立之初，组件的属性生效以前
created	组件实例已经彻底建立，属性也绑定，但真实dom尚未生成，$el还不可用
beforeMount	在挂载开始以前被调用：相关的 render 函数首次被调用
mounted	el 被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子
beforeUpdate	组件数据更新以前调用，发生在虚拟 DOM 打补丁以前
update	组件数据更新以后
activited	keep-alive专属，组件被激活时调用
deadctivated	keep-alive专属，组件被销毁时调用
beforeDestory	组件销毁前调用
destoryed	组件销毁后调用

生命周期示意图

异步请求适合在哪一个生命周期调用？

官方实例的异步请求是在mounted生命周期中调用的，而实际上也能够在created生命周期中调用。

Vue组件如何通讯？

Vue组件通讯的方法以下:

• props/$emit+v-on: 经过props将数据自上而下传递，而经过$emit和v-on来向上传递信息。
• EventBus: 经过EventBus进行信息的发布与订阅
• vuex: 是全局数据管理库，能够经过vuex管理全局的数据流
• $attrs/$listeners: Vue2.4中加入的$attrs/$listeners能够进行跨级的组件通讯
• provide/inject：以容许一个祖先组件向其全部子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效，这成为了跨组件通讯的基础

还有一些用solt插槽或者ref实例进行通讯的，使用场景过于有限就不赘述了。

computed和watch有什么区别?

computed:

1. computed是计算属性,也就是计算值,它更多用于计算值的场景
2. computed具备缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变以后，下一次获取computed的值时才会从新调用对应的getter来计算
3. computed适用于计算比较消耗性能的计算场景

watch:

1. 更多的是「观察」的做用,相似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操做
2. 无缓存性，页面从新渲染时值不变化也会执行

小结:

1. 当咱们要进行数值计算,并且依赖于其余数据，那么把这个数据设计为computed
2. 若是你须要在某个数据变化时作一些事情，使用watch来观察这个数据变化

Vue是如何实现双向绑定的?

利用Object.defineProperty劫持对象的访问器,在属性值发生变化时咱们能够获取变化,而后根据变化进行后续响应,在vue3.0中经过Proxy代理对象进行相似的操做。

// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给你们推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我演过不少,可游戏我只玩贪玩懒月');
  } else {
    console.log('来作个人兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时咱们能够进行额外操做
      console.log(`你们好,我系${newVal}`);
      say(newVal);
    },
  });
});

data.name = '渣渣辉';
//你们好,我系渣渣辉
//戏我演过不少,可游戏我只玩贪玩懒月
复制代码

详细实现见Proxy比defineproperty优劣对比?

Proxy与Object.defineProperty的优劣对比?

Proxy的优点以下:

• Proxy能够直接监听对象而非属性
• Proxy能够直接监听数组的变化
• Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具有的
• Proxy返回的是一个新对象,咱们能够只操做新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改
• Proxy做为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

Object.defineProperty的优点以下:

• 兼容性好,支持IE9

详细实现见Proxy比defineproperty优劣对比?

你是如何理解Vue的响应式系统的?

响应式系统简述:

• 任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
• Vue 的 data 上的属性会被添加 getter 和 setter 属性。
• 当 Vue Component render 函数被执行的时候, data 上会被 触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的全部 data。(这一过程被称为依赖收集)
• data 被改动时（主要是用户操做）, 即被写, setter 方法会被调用, 此时 Vue 会去通知全部依赖于此 data 的组件去调用他们的 render 函数进行更新。

虚拟DOM的优劣如何?

优势:

• 保证性能下限: 虚拟DOM能够通过diff找出最小差别,而后批量进行patch,这种操做虽然比不上手动优化,可是比起粗暴的DOM操做性能要好不少,所以虚拟DOM能够保证性能下限
• 无需手动操做DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,咱们无需手动操做DOM,极大提升开发效率
• 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM能够进行更方便地跨平台操做,例如服务器渲染、移动端开发等等

缺点:

• 没法进行极致优化: 在一些性能要求极高的应用中虚拟DOM没法进行针对性的极致优化,好比VScode采用直接手动操做DOM的方式进行极端的性能优化

虚拟DOM实现原理?

• 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
• 状态变动时，记录新树和旧树的差别
• 最后把差别更新到真正的dom中

详细实现见虚拟DOM原理?

既然Vue经过数据劫持能够精准探测数据变化,为何还须要虚拟DOM进行diff检测差别?

考点: Vue的变化侦测原理

前置知识: 依赖收集、虚拟DOM、响应式系统

现代前端框架有两种方式侦测变化,一种是pull一种是push

pull: 其表明为React,咱们能够回忆一下React是如何侦测到变化的,咱们一般会用setStateAPI显式更新,而后React会进行一层层的Virtual Dom Diff操做找出差别,而后Patch到DOM上,React从一开始就不知道究竟是哪发生了变化,只是知道「有变化了」,而后再进行比较暴力的Diff操做查找「哪发生变化了」，另一个表明就是Angular的脏检查操做。

push: Vue的响应式系统则是push的表明,当Vue程序初始化的时候就会对数据data进行依赖的收集,一但数据发生变化,响应式系统就会马上得知,所以Vue是一开始就知道是「在哪发生变化了」,可是这又会产生一个问题,若是你熟悉Vue的响应式系统就知道,一般一个绑定一个数据就须要一个Watcher,一但咱们的绑定细粒度太高就会产生大量的Watcher,这会带来内存以及依赖追踪的开销,而细粒度太低会没法精准侦测变化,所以Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式,也就是那套响应式系统,一般咱们会第一时间侦测到发生变化的组件,而后在组件内部进行Virtual Dom Diff获取更加具体的差别,而Virtual Dom Diff则是pull操做,Vue是push+pull结合的方式进行变化侦测的.

Vue为何没有相似于React中shouldComponentUpdate的生命周期？

考点: Vue的变化侦测原理

前置知识: 依赖收集、虚拟DOM、响应式系统

根本缘由是Vue与React的变化侦测方式有所不一样

React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差别检测,可是不少组件其实是确定不会发生变化的,这个时候须要用shouldComponentUpdate进行手动操做来减小diff,从而提升程序总体的性能.

Vue是pull+push的方式侦测变化的,在一开始就知道那个组件发生了变化,所以在push的阶段并不须要手动控制diff,而组件内部采用的diff方式其实是能够引入相似于shouldComponentUpdate相关生命周期的,可是一般合理大小的组件不会有过量的diff,手动优化的价值有限,所以目前Vue并无考虑引入shouldComponentUpdate这种手动优化的生命周期.

Vue中的key到底有什么用？

key是为Vue中的vnode标记的惟一id,经过这个key,咱们的diff操做能够更准确、更快速

diff算法的过程当中,先会进行新旧节点的首尾交叉对比,当没法匹配的时候会用新节点的key与旧节点进行比对,而后超出差别.

diff程能够归纳为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。若是4种比较都没匹配，若是设置了key，就会用key进行比较，在比较的过程当中，变量会往中间靠，一旦StartIdx>EndIdx代表oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

• 准确: 若是不加key,那么vue会选择复用节点(Vue的就地更新策略),致使以前节点的状态被保留下来,会产生一系列的bug.
• 快速: key的惟一性能够被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

---