简单理解MVVM模式

什么是MVVM

MVVM是model-view-ViewModel的简称，是一种前端开发的架构模式，其核心是数据的双向绑定。

为什么会出现MVVM

随着H5的发展和webapp的兴起，前端应用越来越复杂，对响应速度要求也越来越高，力求接近原生APP的用户体验。这时原来的开发模式中一个影响性能的问题就凸显了出来，那就是对DOM的大量操作。

• 首先，在开发过程中会调用大量相同的DOM API ，操作复杂，代码冗余。
• 其次，每当数据发生改变我们就要把数据从model同步到view中；当用户通过操作改变了view中的数据，我们又要将数据从view中更新到model中。每次更新都要我们手动用去操作DOM。
• 结果，大量的DOM操作会让我们的网页加载速度变慢，用户体验极差；冗长的代码会变得难以维护，程序员体验极差。

MVVM怎么解决问题

在MVVM中ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，我们不需要再手动操作DOM， 我们只需要关注数据的变化，让DOM框架自动去更新DOM。

MVVM框架和传统jQuery框架操作DOM的区别

jQuery：

<p id="text">123</p>

$("#text").text("hello")

通过操作DOM我们把123替换成hello实现了数据更新。

MVVM:

网页显示：
123 world

代码：

<p id="text">123</p>

var text = {
	content:"123"
}

假设在MVVM框架中我们把数据存在了对象text中，对象为model，p元素就是view，通过两者通过ModelView被关联起来了。

text.content = "hello"

我们只要修改对象的content属性，将他的值变为hello，网页上显示的内容就会自动变为
hello world
MVVM框架自动帮我们完成了DOM操作