MVVN设计模式

一、MVVM设计模式三部分

采用MVVM设计模式，对前端代码重新划分为3部分。

1.界面View

包含HTML+CSS，且 HTML还是增强版

a.HTML中支持变量！不需要js，只要程序中变量值变化，界面中显示自动变化!.

b.HTML中支持分支和循环

2.模型对象Model

专门负责替界面保存所需的所有变量和函数。.

3.视图模型ViewModel

专门负责将模型对象中的变量值和函数配送到界面中。并且自动保持界面显示和程序中的变量一致

二、vue如何实现MVVM设计模式：Vue的绑定原理

（1）创建new Vue({})对象:引入Model

将data对象和 methods对象，引入到new Vue()对象内

a.针对data对象中的变量

• 自动为data对象中每个变量都请了一对儿保镖——访问器属性。访问器属性，直接隶属于new Vue()
  例如，图中data中有n，然后在new Vue中，把n隐藏在data中_n，添加了访问器属性get n(){ return this._n }和set n(value) { this._n = value; }

• 悄悄的在每个变量的set()访问器函数中，添加了一个通知函数
  set n(value) { this._n = value; 通知函数() }

b.针对methods 中的函数

1)methods 对象被打散为多个函数，再分别加入new Vue()中。

结果：原来包含在methods 内部的所有函数，都直接隶属于newVue()。都和为data中变量请的保镖——访问器属性平级了!

2)所以，methods 中的函数只要想访问data 中的变量，都要加 this.

---

DOM和 jq中：事件处理函数中 this ->当前正在触发事件的DOM元素对象.

VUE中的this都指当前vue对象或当前组件对象。

（2）扫描界面中所有元素，创建一棵简化版的虚拟DOM树

虚拟DOM树：只保存可能发生变化的元素的简化版DOM树.

1)当首次加载界面时，new Vue()对象会遍历/扫描原始DOM树。

2)new Vue()只将可能发生变化的元素对象保存进虚拟DOM树中

步骤：

1. 当在任何位置修改了data 中的变量值(访问器属性)，都会自动调用访问器属性的set函数，都会自动调用通知函数()

2. 通知函数会通知虚拟DOM树，某个变量发生了改变

3. 虚拟DOM树会立刻遍历自己内部所有可能发生变化的元素，只找到受当前这个变量影响的个别元素。

4. 用已经封装好的原生的DOM操作，自动修改界面中真实的DOM元素，显示变量的新值

总结：访问器属性+虚拟DOM树

虚拟DOM树的优点

1. 体积小
2. 遍历查找快
3. 便面重复编码，提前封装增删改查操作
4. 更新效率高，只更新受影响的元素