关于Vue的那些事儿

架构图及Vue的简介

一、前后端分离总架构图

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，App有App的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。

在前后端分离的应用模式中，我们通常将后端开发的每个视图都称为一个接口，或者API，前端通过访问接口来对数据进行增删改查。

对应的数据交互如下图 :

二、前端架构设计图

三、MVVM架构模式

MVVM 由 Model,View,ViewModel 三部分构成
Model ：代表数据模型，View代表UI组件，ViewModel是一个同步View和Model的对象。

Model可以在Model中定义数据修改和操作的业务逻辑；
View负责将数据模型转化成UI展现出来;
ViewModel负责View 和 Model 之间的交互

View 和 Model 之间并没有直接的联系，而Model和ViewModel之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要 手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一 管理。

MVVM模式图如下图所示：

四、Vue简介

Vue.js是一个JavaScript MVVM 库，Vue 用于构建用户界面的渐进式框架，渐进式代表的含义是：主张最少。
主张即为对使用这的要求，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

Vue的特点：
（1）双向数据绑定。会自动响应数据的变化情况，根据用户在代码中写好的绑定关系，使数据进行同步修改，实现双向绑定，让开发者不再操作dom对象，有更多时间去思考业务逻辑。
（2）轻量级、API简洁。
（3）组件化。Vue.js通过左键，把各种模块拆分到一个一个单独的组件中，开发者只需写好组件标签，再下号要传入组件的参数，并实现，整个应用就算做完了。
（4）视图、数据和结构的分离。使数据的更改更为简单,不需要进行逻辑代码的修改,只需 要操作数据就能完成相关操作。
（5）虚拟 DOM。用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时 候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿，而 Virtual DOM 则是虚拟 DOM 的英文，简单来说，他就是一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计 算出来并优化，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。 最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。

五、Vue 热加载

热加载：通过数据的双向绑定，可以实现热加载，即改完页面代码能力及在浏览器方面显示效果，提高开发效率。

六、Vue 的双向数据绑定的原理

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现 数据绑定的。

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将 遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

Observer 数据监听器：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通 知订阅者，内部采用 Object.defineProperty 的 getter 和 setter 来实现。

Compile 指令解析器：它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换 数据，以及绑定相应的更新函数。

Watcher 订阅者： 作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动 的通知，执行指令绑定的相应回调函数。

Dep 消息订阅器：内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发 notify 函数，再调用订阅者的 update 方法。