天健通泰技术分享– 浅析MVVM与vue.js2018-04-25

随着旧浏览器逐渐淘汰，移动端需求增加，前端的交互越来越多，功能也就越来越复杂，mv*框架在前端的应用也就越来越流行。特别是近几年的mvvm框架涌现的越来越多，像angular、react、vue，并称前端三大流行前端框架。今天文章分享的内容是小编在一年多的项目实践之后，对MVVM 和 Vue.js 的简单认识和总结，希望对各位有所帮助！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入口函数，整合以上三者 。

    喜欢就关注我们，北京天健通泰科技有限公司是一家拥有自主研发技术和产品的高科技软件公司。公司专业提供试验、检验检测业务信息化产品及解决方案，知识信息化总线产品及解决方案；公司拥有包括神鹰®试验业务综合管理平台系统、神鹰®试验数据管理系统(TDM)、神鹰®实验室信息管理系统（LIMS)，和知汇™智能知识管理系统。