MVVM是Model-View-ViewModel的缩写。它是一种基于前端开发的架构模式。它的核心是为View和ViewModel提供双向数据绑定，使得ViewModel的状态变化可以自动传递给View，即所谓的双向数据绑定。Vue.js是一个Javascript库，提供MVVM风格的双向数据绑定，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性。这种轻量级的架构让前端开发更加高效便捷。1、为什么会出现MVVM？2015年开始接触MVVM，可以说2015年是MVVM最火的一年。在那之前，我只知道MVC。接触MVC大约是5年前，2011年，当时刚学编程语言和Java，用Java中经典的SSH框架搭建了一个标准的MVC框架。说实话，MVC用了这么多年，但一直没有深入的了解。我只停留在使用层面。直到接触到Vue.js，我才开始研究MVVM架构思想，然后回过头来看MVC。感觉~MVC是Model-View-Controller的缩写，即Model-View-Controller，也就是说一个标准的Web应用是由这三部分组成的：View用于将数据以一定的方式呈现给用户.模型其实就是数据。Controller接收并处理来自用户的请求，并将Model返回给用户。在HTML5还没有普及的那些年，MVC作为web应用的最佳实践是可以的，因为web应用的View层比较简单，前端需要的数据基本都可以在后端处理。嗯，View层主要是做展示的。当时提倡Controller来处理复杂的业务逻辑，所以View层比较轻量级，也就是所谓的thinclient思想。从2010年到2011年，HTML5的概念被炒作和追捧。2012年，W3C正式宣布HTML5规范正式定稿。2013年刚加入公司时，我接触到了第一个HTML5框架Senchtouch，这是一个用于构建移动应用程序的HTML5框架。维持。2、前端为什么要工程化，要用MVC？与HTML4相比，HTML5的亮点在于它为移动设备提供了一些非常有用的功能，这使得HTML5具备了开发Apps的能力。用HTML5开发App最大的优势就是跨平台、迭代快、上线，节省人力成本，提高效率，所以很多企业开始改造传统App，逐步用H5替代Native。到2015年，市面上的大部分APP都或多或少嵌入了H5页面。由于是用H5构建App，View层做的不仅仅是简单的数据展示，它不仅要管理复杂的数据状态，还要处理移动设备上的各种操作行为等等。所以前端也需要工程化，需要类似MVC的框架来管理这些复杂的逻辑，让开发更高效。但是这里的MVC发生了细微的变化：ViewUI布局，显示数??据。模型管理数据。控制器响应用户操作并将模型更新为视图。这种MVC架构模式对于简单的应用来说似乎还可以，也符合软件架构的分层思想。但实际上，随着H5的不断发展，人们希望用H5开发的应用能够媲美Native，或者接近原生App的体验效果，所以前端应用的复杂度不同于以往，并且它不是以前的样子。这时候，前端开发暴露出三个痛点：开发者在代码中调用大量相同的DOMAPI，处理繁琐，操作冗余，代码难以维护。大量DOM操作降低页面渲染性能，降低加载速度，影响用户体验。当Model频繁变化时，开发者需要主动更新View；当用户的操作导致Model发生变化时，开发者也需要将变化的数据同步到Model中。这样的工作不仅繁琐，而且难以维护复杂多变的数据状态。其实早期jquery的出现就是为了让前端更简洁的操作DOM而设计的，但它只解决了第一个问题，另外两个问题一直伴随着前端存在。3、MVVM的出现终于可以解决以上三个问题。MVVM由三部分组成：模型、视图和视图模型。Model层代表数据模型，数据修改和操作的业务逻辑也可以定义在Model中；视图代表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实例时，Vue将迭代其属性并使用Object.defineProperty将它们转换为getters/setters。getters/setters对用户是不可见的，但在内部它们让Vue跟踪依赖关系，在访问和修改属性时通知更改。Observer数据监听器可以监听数据对象的所有属性。如果有任何变化，它可以获取最新的值并通知订阅者。它内部使用了Object.defineProperty的getter和setter来实现。编译指令解析器，其功能是扫描分析各个元素节点的指令，根据指令模板替换数据，并绑定相应的更新函数。Watcher订阅者作为连接Observer和Compile的桥梁，可以订阅和接收每一次属性变化的通知，并执行指令绑定的相应回调函数。Dep消息订阅者内部维护了一个数组来收集订阅者（Watcher）。数据变化触发notify函数，然后调用订阅者的update方法。从图中可以看出，当执行newVue()时，Vue进入了初始化阶段。一方面，Vue会遍历data选项中的属性，使用Object.defineProperty将其转化为getter/setter，实现数据变化监听功能；另一方面，Vue的命令编译器Compile扫描并解析元素节点的命令，初始化视图，订阅Watcher更新视图。此时Wather会将自己添加到消息订阅者（Dep）中，初始化完成。当数据发生变化时，会触发Observer中的setter方法，setter会立即调用Dep.notify()，Dep开始遍历所有订阅者，并调用订阅者的update方法，订阅者响应视图收到通知更新后。以上内容是我经过半年多的项目实践，对MVVM和Vue.js的简单理解和总结。希望对大家有所帮助！
