对MVVM模式的理解和原理

对MVVM模式的理解和原理

1.首先：MVVM分为view ，model ,viewmodel
view: 视图模型 。其实就是一个增强版的html ，可以支持变量，一些程序的要素。
model：数据模型。其实就是一个保存所有页面所需的变量的对象——data={…}
viewmodel : 就是将视图模型和数据模型给绑定起来，以后只要数据模型中的数据改变了，页面中也会跟着自动改变。

MVVM的绑定原理：
可以分为两大类：
1.构建响应系统
1.就是将数据模型data对象，引入new vue中
2.会打散data对象为多个属性
3，并且还会为每个属性都添加访问器属性
2.构建虚拟DOM树
1.它会根据new vue中的el后面的选择器 ，去找到对应的元素片段，监视这个片段
2.会扫描父元素及其所有的子元素
3.每找到一个变量，就会添加进虚拟DOM树中，
4.在首次加载页面时，会立即去new vue中查找是否有需要变量的值 /找到了会立刻将变量的值替换到真实dom树的位置
5。在以后。在new vue 中修改了这个变量值 ，都会给虚拟dom树发送消息，然后虚拟dom树会只扫描受影响的元素，进行更改后，再返回更新真实dom树

-----》虚拟dom树的优点
1.小，只包含可能变化的元素的集合，遍历极快
2.效率高，因为只更新受影响的元素，不受影响的元素不会变
3，已经封装dom的操作，避免了大量重复的编码。