MVVM与vue.js

随着旧浏览器逐渐淘汰，移动端需求增加，前端的交互越来越多，功能也就越来越复杂，mv*框架在前端的应用也就越来越流行。特别是近几年的mvvm框架涌现的越来越多，像angular、react、vue，并称前端三大流行前端框架。
MVVM框架
首先,先了解一下什么是MVVM框架?MVVM框架主要包括三个部分Model、View和ViewModel，Model指的是数据部分，对应到前端就是一些Javascript对象，View指的视图部分，对应到前端就是DOM，ViewModel就是连接数据和视图的中间件，在MVVM的框架下视图和数据是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。
其次，MVVM框架的主要应用场景有哪些？
1）针对具有复杂交互逻辑的前端应用；
2）提供基础的架构抽象；
3）通过Ajax数据持久化，保证前端用户体验；
好处就是当前后端进行一些数据交互的时候，前端可以通过Ajax请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据和内容，特别是对于移动端应用场景，刷新页面的代价太昂贵，会重新加载很多资源，虽然有些资源会被缓存，但是页面的DOM、JS、CSS都会被浏览器重新解析一遍，因此，移动端页面经常会做成SPA单页应用。
Vue.js的核心思想
Vue.js的核心思想包括两个方面：数据驱动和组件化。
数据驱动：在vue.js中只需要操作数据，vue.js通过directives指令去对DOM做一层封装,当数据发生变化,会通知指令去修改对应的DOM，数据驱动DOM变化,DOM是数据的一种自然映射,vue.js还会对操作做一些监听，当我们修改视图的时候，vue.js监听到这些变化,从而去改变数据,这样就实现了数据的双向绑定。
组件化的目的是扩展HTML元素，封装可重用的代码
组件设计原则：
1）页面上每个独立的可视/可交互区域视为一个组件；
2）每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护； 3）页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。
vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
vue.js要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者