Vue系列(一)：MVVM概念理解和Vue介绍
接手了个项目，需要对其进行重构，使用 Vue 框架重构前端，实现前后端分离。
让一个多年只熟悉JSP、JS、JQuery的后端工程师来对前端进行改造，头皮有些发麻，对后端人员来说，Vue 和 JS、JQuery完全是两个知识体系，Vue 不只是款前端框架(工具)，对后端人员来说还带来思维的转变，这不是一件容易的事。没办法只得硬顶着上，吃力不讨好的活也要干出漂亮。这篇文章记录学习过程和思路。
Vue 官网, Vue CLI 3,
相关概念
初步了解了下，近些年前端技术发展很快，出现新的理念和相应的技术体系，推出了新前端框架和工具，如Vue,react,angular,node,npm,webpack等，也许这些框架工具推出已有段时间，但对多数后端开发人员仍是个新事物。
在使用 Vue 之前，先理解相关的概念有助于对 Vue 更深入的认识。
单页面
单页面：只有一张 Web 页面的应用，加载单个 HTML 页面，页面内容是根据用户与应用程序交互时动态更新。可简单理解为一个外壳和多个页面片段(组件)。单页面的 url 模式是 domain.com/#/pageone。
而传统的多页面应用是有多个 Web 页面，通过页面之间的跳转来更新页面和内容，是对页面进行整页刷新。
组件化：开发单页面应用，模块化(组件化)的开发和设计就非常重要，页面可以理解为是组件的容器，组件可以嵌套自由组合构建出完整的页面，里面涉及到了 MVVM 分层思路，页面路由等相关知识。 单页面应用的开发可以充分发挥前端的技术和体现前端的价值。
单页面应用不需要重新加载整个页面，减轻服务器压力，加快了页面响应速度，用户体验更好、前后端分离，前端工程化，独立开发、页面可以做些炫酷的效果；但也存在缺点，浏览器自带的前进后退导航不可用、第一次加载时因资源较多会较慢、提高了前端开发的复杂度，需要借助专业框架。
MVVM
后端工程师理应是非常了解MVC模式的，而 MVVM 由 MVC 经 MVP 演化而来(MVC → MVP → MVVM)，是将视图状态抽像出来，把视图UI完全剥离。
M:model 指数据的JS对象，大多是向后台服务器接口发送请求返回的数据。
V:view 指视图所有展示元素，可理解为展现出来的界面，。
VM:view-model ViewModel 是 MVVM 的核心，负责桥接 view和model，封装视图状态和呈现内容(模型数据)，是与视图层进行双向数据绑定，与 Model 层通过接口请求进行数据交互。 VM 可以确定某一视图模块在某一视图状态下的呈现内容，
视图状态：指将视图的布局和效果的动态改变(不需要与外界交互的状态变迁)，将这些改变抽像成状态。 例如 enabled，可以调用setEnable()方法来改变视图的可用状态，传入true表示可用，传入false表示不可用，不可用的视图是无法响应onTouch事件的；或可理解为视图的交互逻辑(视图业务逻辑)。
【以下引用】
ViewModel 所封装出来的包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在 ViewModel 里并进行了绑定。
这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发，所有 Vue 也有被称为数据驱动框架。
View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
此处的描述的 行为 不易理解，行为是包括动作和结果, 而在 VM 里是不产生动作的，使用 行为 这个词个人理解并不适当。
Vue 介绍
Vue介绍： Vue是基于 MVVM 模式实现的一套框架，在vue中，Model 指的是 js 中的数据对象，View 指的是页面视图，ViewModel 指的是 Vue 实例化对象。
在使用中，需要为每一处需要绑定(动态更新)的 DOM 节点创建一个 Vue 对象(new Vue())，数据绑定(数据与视图状态的映射)封装在 Vue 对象中，在开发中只需要关注视图状态和数据变化。
双向数据绑定：指模型数据，视图数据任意一方变化，都会触发另一方的同步变化。
View-Model 通过 DOM 事件监听方式监听视图变化，通知数据做出改变; 实现了一个 observer 观察者，当观察到数据发生变化通过 directives 通知视图修改 DOM 来做出响应。
在MVVM 模式下， View 和 Model 是不能直接通信，必须通过 ViewModel 来通信。还有另一种方式实现双向数据绑定，即 Angular 所采用的脏值检测方式比对数据是否有变更来决定是否更新视图(轮询,事件触发时检测)。
数据驱动视图：响应式的数据绑定是数据驱动视图的基础，数据驱动 DOM 变化，DOM是数据的一种自然映射。
Vue与MVVM
写此文章持续5天时间，反复的修改，阅读多方资料总有疑惑，抽像的概念性知识点非常不易理解，若理清楚了也就豁然开朗。至此，只能说是初步理解了Vue 与 MVVM 涉及到相关概念，更多在后续 Vue 的实践中深入理解。
其它参考
Vue系列(一)：MVVM概念理解和Vue介绍
