mvvm

mvvm详解

什么是mvvm？

mvvm是Model-View-ViewModel的缩写。
-model：数据-后端传递的数据-data数据
-view：视图-代表 UI 组件，它负责将数据模型转化成 UI 展现出来-template
-ViewModel:视图模型-是一个同步View 和 Model的对象。MVVM模式的核心，它是连接Model和View的桥梁。
MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

为什么出现mvvm？

一直以来前端开发暴露的问题：
1.开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。
2.用户大量交互，导致dom操作过于频繁，效率低下，影响用户体验
3.当 Model 频繁发生变化，开发者需要主动更新到 View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到 Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。
早期 jquery 的出现就是为了前端能更简洁的操作 DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。

mvvm优势？

1.视图与数据分离，耦合性低，互不影响。
2.数据视图双向绑定，有mvvm框架自动绑定。
3.前端开发更灵活。

具体来看前端发展过程

1.直接使用js操作dom节点，使用浏览器提供的原生API：

var dom = document.getElementById('xxx');
dom.innerHTML = 'xxx';

开发者需要调用dom api进行操作
 
2.使用jQuery，简洁的API使用起来很方便

$('#xxx').text('xxx').css('color', 'green');

 
3.使用mvvm框架（这里举个例子与jquery对比）
修改下面name和age：

<!-- HTML -->
<p>Hello, <span id="name">Bart</span>!</p>
<p>You are <span id="age">12</span>.</p>

 
使用jquery修改两个dom节点：

var name = 'Homer';
var age = 51;
$('#name').text(name);
$('#age').text(age);

 
使用mvvm实现：

var person = {
    name: 'Bart',
    age: 12
};
person.name = 'Homer';
person.age = 51;

（以上例子来自廖雪峰js教程)
 
可以发现我们只需要修改数据，不需要关心怎么操作dom节点,而是直接修改js的对象。
剩下的由mvvm框架帮我们实现了(数据绑定)