前端面试宝典（五）—— Vue

小伙伴们，我又回来了，实在太忙了。今天继续以前的专题吧，今天说说Vue。

什么是 MVVM？

MVVM是Model-View-ViewModel的简写，Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象（桥梁）。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。

说说Vue的MVVM实现原理？

数据劫持、数据渲染、数据监听

1. 数据劫持：通过Object.defineProperty进行数据劫持，在对象上定义新属性或修改属性并返回对象。
2. 数据监听：通过sub，pub的发布者订阅者模式来对数据进行监听。
3. 数据渲染：数据渲染为html分为两种情况，第一种是初次渲染的时候，第二种是渲染之后数据发生改变的时候，它们都需要调用updateComponent。

mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

MVC中M是Model（数据模型），用于存放数据；V是View（视图），也就是用户界面；C则是Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。

MVVM上题已经介绍。

区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。且mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

Vue生命周期的理解？

vue 的生命周期就是 vue 实例从创建到销毁的过程。

• beforeCreate：组件实例刚被创建，组件属性计算之前
• created：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
• beforeMount：模板编译/挂载之前
• mounted：模板编译/挂载之后
• beforeUpdate：组件更新之前
• updated：组件更新之后
• beforeDestroy：组件销毁之前调用
• destroyed：组件销毁之后调用

组件之间如何通信？

1. props/$emit：父组件A通过props的方式向子组件B传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。用于父传子或子传父。
2. $emit/$on：通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。
3. Vuex：Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。用于兄弟通信。
4. provide/inject：Vue2.2.0新增API,这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。用于跨级通讯。

Compute与watch的区别？

computed:

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

watch:

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

下期我们继续～