Vue解析--如何应对面试官提问

近期不断面试中，面试官都会提一些关于Vue相关的源码和“全家桶”之类的问题。那么针对这些提问，咱们应该如何更好应答呢？在这里我把对Vue的理解整理出来供你们来参考。

1.Vue是什么？

Vue是一套构建用户界面的渐进式框架，也是一个很是典型的 MVVM 的程序结构（model-view-viewmodel）。

官方用语：

Vue (读音 /vjuː/，相似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不一样的是，Vue 被设计为能够自底向上逐层应用。Vue 的核心库只关注视图层，不只易于上手，还便于与第三方库或既有项目整合。另外一方面，当与现代化的工具链以及各类支持类库结合使用时，Vue 也彻底可以为复杂的单页应用提供驱动。

2.vue既然是MVVM结构比MVC好在哪里？

MVC模式是MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们两个的MV即Model，view相同，不一样的是MV之间的纽带部分。

☞什么是MVC？

MVC容许在不改变视图的状况下改变视图对用户输入的响应方式，用户把对View的操做交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操做，一旦Model发生变化便通知相关视图进行更新。

若是前端没有框架，只使用原生的html+js，MVC模式能够这样理解。将html当作view;js当作controller，负责处理用户与应用的交互，响应对view的操做（对事件的监听），调用Model对数据进行操做，完成model与view的同步（根据model的改变，经过选择器对view进行操做）;将js的ajax当作Model，也就是数据层，经过ajax从服务器获取数据。

☞什么是MVVM?

MVVM与MVC二者之间最大的区别就是：MVVM实现了对View和Model的自动同步，也就是当Model的属性改变时，咱们不用再本身手动操做Dom元素来改变View的变化，而是改变其属性后，该属性对应的View层数据会自动改变。 以Vue为例：

<div id="vueDemo">
  <p>{{ title }}</p>
  <button v-on:click="clickEvent">hello word</button>
</div>
复制代码

var vueDemo = new Vue({  
    el: '#vueDemo',  
    data: {    
        title: 'Hello Vue!'  
    },  
    methods: {    
        clickEvent: function () {      
            this.title = "hello word!"  
        }  
    }
})
复制代码

这里的html => View层，能够看到这里的View经过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，经过数据绑定更新到View。

Vue实例中的data至关于Model层，而ViewModel层的核心是Vue中的双向数据绑定，当Model发生变化时View也能够跟着实时更新，同理，View变化也能让Model发生变化。

总的看来，MVVM比MVC精简不少，不只简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操做DOM元素。由于在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提升代码的可重用性。

3.Vue响应式原理是什么？

Vue是基于 Object.defineProperty 来实现数据响应的，而 Object.defineProperty 是 ES5 中一个没法 shim 的特性，不支持IE8如下版本的浏览器。Vue经过Object.defineProperty的 getter/setter 方法对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据； 受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或删除。因为 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，因此属性必须在 data 对象上存在才能让Vue转换它，这样才能让它是响应的。

观察者模式（Observer, Watcher, Dep)

先简介一下，后面的文章会具体的写到：

Observer类

主要用于给Vue的数据defineProperty增长getter/setter方法，而且在getter/setter中收集依赖或者发送通知进行更新。

Watcher类

用于观察数据（或者表达式）变化而后执行回调函数（其中也有收集依赖的过程），主要用于$watch API和指令上。

Dep类（Dependence依赖的缩写）

就是一个可观察对象，能够有不一样指令订阅它（它是多播的）

观察者模式,跟发布／订阅模式有点像，可是其实略有不一样。

发布／订阅模式是由统一的事件分发调度中心，on则往中心中数组加事件（订阅），emit则从中心中数组取出事件（发布），发布和订阅以及发布后调度订阅者的操做都是由中心统一完成。

可是观察者模式则没有这样的中心，观察者模式中包含observer观察者和subject主题对象。observer须要观察subject时，须要先到subject里进行注册subject对象持有observer对象的集合句柄，当subject对象的内部状态发生变化的时候，就会把这个变化通知全部的观察者。

4.Vue源码有过了解吗？

以前对Vue源码也是有点小小的研究，只不过没有很体系的记录，如今有点时间，那就作一次基础的总结吧。一方面要克服本身的惰性，另外一方面也蛮想从新温故一遍。哈哈~~ 咱们先来看一下Vue源码的目录结构吧：

熟悉每一个模块具体的功能，对以后深刻研究源码仍是颇有帮助的呢。 我偷偷告诉你，我更喜欢去理解下面那张思惟导图哦，接下来的全部文章都会根据下图的各个环节作个分析哦！

咱们能够先看一下概览：

我会同时更新在github上，你要是喜欢能够给个star，先谢谢啦~

1.浅析Vue源码（一）—— 造物创世

2.浅析Vue源码（二）—— initMixin(上)

3.浅析Vue源码（三）—— initMixin(下)

4.浅析Vue源码（四）—— $mount中template的编译--parse

5.浅析Vue源码（五）—— $mount中template的编译--optimize

6.浅析Vue源码（六）—— $mount中template的编译--generate

7.浅析Vue源码（七）——render到VNode的生成

8.浅析Vue源码（八）——依赖收集与监听

9.浅析Vue源码（九）——VirtualDOM与path

10.vue番外篇 -- vue-router浅析原理

11.Vue番外篇 -- vue.nextTick()浅析