Vue.js和MVVM的注意事项

MVVM是模型-视图-视图模型的缩写。它是一种基于前端开发的架构模式。其核心是提供视图和视图模型之间的双向数据绑定，使得视图模型的状态变化自动传递给视图。这被称为双向数据绑定。

Vue.js是一个Javascript库，提供MVVM风格的双向数据绑定，重点是View层。它的核心是MVVM的虚拟机，也就是视图模型。视图模型负责连接视图和模型，确保视图和数据的一致性。这种轻量级架构使得前端开发更加高效和方便。

MVVM为什么会出现？

我在2015年接触了MVVM。可以说，2015年是MVVM最热的一年。在此之前，我所知道的都是MVC，MVC大概是在5年前接触的，也就是2011年。当时我刚学编程语言，学的是Java，用Java中经典的SSH框架搭建了一个标准的MVC架构。说实话，MVC架构已经用了这么多年了，但是一直没有深入了解，只停留在使用层面。接触Vue.js之后，研究了一下MVVM的建筑思想，再回头看看MVC，然后有一种豁然开朗的感觉~

MVC是模型-视图-控制器的缩写，这意味着一个标准的Web应用程序由这三部分组成：

视图用于以某种方式向用户呈现数据

模型实际上是数据

控制器接收并处理来自用户的请求，并将模型返回给用户

在HTML5不流行的那些年，MVC作为Web应用的最佳实践还可以，因为Web应用的View层比较简单，前端需要的数据基本可以在后端处理。视图层主要用于演示。当时提倡用Controller来处理复杂的业务逻辑，所以View层比较轻量，也就是所谓的瘦客户端思想。

从2010年到2011年，HTML5的概念升温并受到追捧。2012年，W3C正式宣布HTML5规范正式定稿。2013年刚进公司的时候接触到一个HTML5框架，Sench Touch，就是一个构建移动应用的HTML5框架。它将前端和后端完全分开，前端采用MVC架构，作为一个独立的项目来维护。

为什么前端要工程化，要用MVC？

相比HTML4，HTML5最大的亮点在于它为移动设备提供了一些非常有用的功能，这使得HTML5具备了开发应用的能力。HTML5开发app最大的优势是跨平台、迭代快、在线，节省人力成本，提高提交效率。因此，许多企业开始改造传统应用，并逐渐用H5取代原生页面。到2015年，市场上的许多应用或多或少都会嵌入H5页面。

由于是用H5搭建App，View层做的不仅仅是简单的数据显示，还要管理数据和用户操作的各种状态，还要处理用户在移动设备上的各种操作行为。因此前端也需要一个类似于MVC的框架来管理这些复杂的逻辑，让开发更加高效。但是在这个时候，MVC发生了一点变化：

查看用户界面布局，显示数据

模型管理数据

控制器响应用户操作，并将模型更新为视图

这种MVC架构模式对于基础应用是可以的，符合软件架构的分层思想。但事实上，随着H5的不断发展，人们希望H5开发的应用能够与Native相提并论，或者接近native App的体验效果，所以前端应用的复杂度与以往不同。这时，前端暴露出三个重要的痛点：

1.开发人员在大量代码中调用相同的DOM API，这使得代码难以维护。

2.大量的DOM操作降低了页面渲染性能，减缓了加载速度，影响了用户体验。

3.当模型频繁变化时，开发人员需要主动更新到View当用户的操作导致Model发生变化时，开发人员还需要将变化后的数据同步到Model中，不仅繁琐，而且难以维护复杂多变的数据状态。事实上，早期jquery的出现是为了让前端更简洁地操作DOM，但它只解决了第一个问题，后两个问题一直存在于前端。

MVVM的出现完美地解决了上述三个问题。

MVVM由模型、视图和视图模型组成。模型层表示数据模型，数据修改和操作的业务逻辑也可以在模型中定义。视图代表用户界面组件，负责将数据模型转换成用户界面并显示出来。视图模型是一个同步视图和模型的对象。

在MVVM架构下，视图和模型之间没有直接的联系，而是通过视图模型进行交互。Model和ViewModel之间的交互是双向的，所以View数据的变化会同步到Model，Model数据的变化会立即反映到View。

ViewModel通过双向数据绑定连接视图层和模型层，视图和模型之间的同步完全是自动的，无需人为干预。所以开发者只需要关注业务逻辑，不需要手动操作DOM，也不需要关注数据状态的同步。复杂的数据状态维护完全由MVVM管理。

Vue.js的详细信息

Vue.js可以说是MVVM架构的最佳实践，重点是MVVM的ViewModel，它不仅实现了双向数据绑定，而且是一个相对轻量级的js库，API简单，使用方便。关于Vue的基础知识有现成的教程，这里不再赘述。让我们简单了解一下关于双向绑定的Vue.js的一些实现细节：

Vue.js采用Object.defineProperty的getter和setter，结合观察者模式实现数据绑定。当一个普通的Javascript对象作为其数据选项传递给Vue实例时，Vue将遍历其属性，并通过使用Object.defineProperty将其转换为getter/setter .用户看不到getter/setter，但在内部，他们让Vue跟踪依赖关系，并在属性被访问和修改时通知更改。

观察者数据监听器可以监听数据对象的所有属性。如果有任何变化，它可以获得最新的值并通知订阅者。对象定义属性的获取器和设置器在内部使用

编译指令解析器，扫描解析每个元素节点的指令，根据指令模板替换数据，绑定相应的更新函数

观察者订阅器作为连接观察者和编译的桥梁，可以订阅和接收每个属性变化的通知，并执行相应的指令绑定回调函数

Dep消息订阅者在内部维护一个数组，用于收集订阅者。数据的更改会触发notify函数，然后调用订阅者的更新方法

当执行新的Vue()时，Vue进入初始化阶段。一方面，Vue遍历数据选项中的属性，利用Object.defineProperty将其转换为getter/setter，实现监控数据变化的功能；另一方面，Vue的指令编译器编译扫描解析元素节点的指令，初始化视图，订阅Watcher更新视图。此时，观察者将自己添加到消息订阅者(dep)中，初始化完成。

当数据发生变化时，会触发Observer中的setter方法，setter会立即调用Dep.notify()。Dep开始遍历所有订户，并调用订户的更新方法。订阅者收到通知后，会相应地更新视图，并完成一次数据绑定。

以上是边肖向大家介绍的Vue.js和MVVM的注意事项，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！