【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！
这种 MVC 架构模式对于简单的应用来看起是OK 的，也相符软件架构的分层思惟。 但实际上，跟着H5 的赓续成长，人们更欲望应用H5 开辟的应用能和Native 媲美，或者接近于原生App 的体验效不雅，于是前端应用的复杂程度已不合往日，今非昔比。这时前端开辟就裸露出了三个痛点问题：
- 开辟者在代码中大年夜量调用雷同的 DOM API, 处理繁琐 ，操作冗余，使得代码难以保护。
- 大年夜量的DOM 操作使页面衬着机能降低，加载速度变慢，影响用户体验。
- 当 Model 频繁产生变更，开辟者须要主动更新到View ；当用户的操作导致 Model 产生变更，开辟者同样须要将变更的数据同步到Model 中，如许的工作不仅繁琐，并且很难保护复杂多变的数据状况。
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开辟的架构模式，其核心是供给对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状况改变可以主动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个供给了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，包管视图和数据的一致性，这种轻量级的架构让前端开辟加倍高效、便捷。
1、为什么会出现 MVVM？
我接触MVVM 是在2015年，可以说2015年是MVVM 最火热的一年，而在这之前，我所知道的就是MVC, MVC 大年夜约是在5年前，也就是2011年的时刻接触的，那时刻刚学编程说话，学的Java，而Java 中经典的 SSH 框架就用来构建一个标准的MVC 框架。说实话，MVC 用了这么多年，但始终没有很深刻的懂得，只逗留在用的层面， 一向到接触 Vue.js 之后，研究了MVVM 架构思惟，然后再回头看 MVC ，才有一种豁然开朗的感到~
MVC 即 Model-View-Controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的Web 应用法度榜样是由这三部分构成的：
- View 用来把数据以某种方法出现给用户。
- Model 其实就是数据。
- Controller 吸结束处理来自用户的请求，并将 Model 返回给用户。
在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是OK 的，这是因为 Web 应用的View 层相对来说比较简单，前端所须要的数据在后端根本上都可以处理好，View 层主如果做一下展示，那时刻倡导的是 Controller 来处理复杂的营业逻辑，所以View 层相对来说比较轻量，就是所谓的瘦客户端思惟。
2010年到2011年，HTML5概念被热炒，受到追捧，2012年，W3C 正式宣布HTML5规范已经正式定稿。2013年我刚进公司就接触了第一个 HTML5 框架 Sench touch, 它是一款用来构建移动应用的HTML5 框架，它将前后端彻底分别，前端采取MVC 架构，作为一个自力的项目工程来保护。
2、前端为什么要工程化，要应用MVC？
当数据产生变更时，Observer 中的 setter 办法被触发，setter 会急速调用Dep.notify()，Dep 开端遍历所有的订阅┞愤，并调用订阅┞愤的 update 办法，订阅┞愤收到通知后对视图进行响应的更新。
相对 HTML4 , HTML5 最大年夜的亮点是它为移动设备供给了一些异常有效的功能，使得 HTML5 具备了开辟App的才能, HTML5开辟App 最大年夜的好处就是跨平台、快速迭代和上线，节俭人力成本和进步效力，是以很多企业开端对传统的App进行改革，逐酱竽暌姑H5代替Native，到2015年的时刻，市情上大年夜多半App 或多或少嵌入都了H5 的页面。
既然要用H5 来构建 App, 那View 层所做的事，就不仅仅是简单的数据展示了，它不仅要治理复杂的数据状况，还要处理移动设备上各类操作行动等等。是以，前端也须要工程化，也须要一个类似于MVC 的框架来治理这些复杂的逻辑，使开辟加倍高效。 但这里的 MVC 又稍微发了点变更：
- View UI构造，展示数据。
- Model 治理数据。
- Controller 响应用户操作，并将 Model 更新到 View 上。
其实，早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，别的两个问题始终伴跟着前端一向存在。
3、MVVM 的出现，完美解决以上三个问题
MVVM 由 Model,View,ViewModel 三部分构成，Model 层代表数据模型，也可以在Model中定义数据修改和操作的营业逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展示出来，ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，View 和 Model 之间并没有直接的接洽，而是经由过程ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 是以View 数据的变更会同步到Model中，而Model 数据的变更也会急速反竽暌功到View 上。
ViewModel 经由过程双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作美满是主动的，无需工资干涉，是以开辟者只需存眷营业逻辑，不须要手动操作DOM, 不须要存眷数据状况的同步问题，复杂的数据状况保护完全由 MVVM 来同一治理。
4、Vue.js 细节
Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，并且也是一款比拟较较轻量级的JS 库，API 简洁，很轻易上手。Vue的基本常识网上有现成的教程，此处不再赘述， 下面简单懂得一下 Vue.js 关于双向绑定的一些实现细节：
Vue.js 是采取 Object.defineProperty 的 getter 和 setter，并结合不雅察者模式来实现数据绑定的。当把一个通俗 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，然则在内部它们让 Vue 追踪依附，在属性被拜访和修改时通知变更。
推荐阅读
【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！Win10体系装完之后，很多用户都邑立时安装本身爱好的输入法，可是虽说输入法安装成功了，然则它并不是默认的，于是有效户>>>详细阅读
本文标题：Vue.js和MVVM小细节
地址：http://www.17bianji.com/lsqh/36316.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示