MVVN设计模式

一、MVVM设计模式三部分

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

1.界面View

包含HTML&＃43;CSS&＃xff0c;且 HTML还是增强版

a.HTML中支持变量&＃xff01;不需要js&＃xff0c;只要程序中变量值变化&＃xff0c;界面中显示自动变化!.

b.HTML中支持分支和循环

2.模型对象Model

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

3.视图模型ViewModel

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

二、vue如何实现MVVM设计模式&＃xff1a;Vue的绑定原理

&＃xff08;1&＃xff09;创建new Vue({})对象:引入Model

将data对象和 methods对象&＃xff0c;引入到new Vue()对象内

a.针对data对象中的变量

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

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

b.针对methods 中的函数

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

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

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

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

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

&＃xff08;2&＃xff09;扫描界面中所有元素&＃xff0c;创建一棵简化版的虚拟DOM树

虚拟DOM树&＃xff1a;只保存可能发生变化的元素的简化版DOM树.

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

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

步骤&＃xff1a;

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

2. 通知函数会通知虚拟DOM树&＃xff0c;某个变量发生了改变

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

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

总结&＃xff1a;访问器属性&＃43;虚拟DOM树

虚拟DOM树的优点

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