什么是MVVM

MVVM: (Model, View, ViewModel)

1.MVVM设计模式: 对前端代码的重新划分

2. 旧前端代码，分为三部分:
(1). HTML: 专门保存网页的内容和结构
(2). CSS: 专门为网页中的元素添加样式
(3). JS: 专门为网页中的元素添加交互效果
3. 使用旧前端代码会出现哪些问题:
(1). 因为HTML和CSS都是静态的语言。缺少标准的程序语言必须的要素
a. 比如HTML和CSS中没有变量，就无法实现一次修改，多处变化
b. 比如HTML和CSS中缺少分支和循环，就无法实现基本的判断和反复生成的功能
(2). 页面上所有的琐碎的修改都要依赖js来实现。导致js代码极其冗余，且包含大量重复劳动！
4.MVVM，也将代码分为3部分:
(1). 界面（View）: 包括以前的HTML+CSS，而且还增强了HTML的功能
a. 给HTML添加了变量的功能: {{n}} 如果n变化，则span自动变化，无需任何js代码。
b. 为HTML添加了分支和循环功能: v-if v-else 以及v-for
(2). 模型对象(Model): 专门集中保存页面所需的变量和函数的对象
比如: data和methods都是模型对象
模型对象中的变量和方法不会自己添加到界面中的元素上，此时需要视图模型将变量和方法添加到界面中的元素上
(3). 视图模型(ViewModel):
a. 什么是视图模型: 自动将data中的变量和methods中的函数送到界面中指定元素上，并能自动保持界面显示与data中变量值同步 一种特殊的对象
b. 比如: new Vue()就充当了视图模型自动配送的角色。
5.new Vue()实现MVVM设计模式的原理: Vue的绑定原理（访问器属性+虚拟DOM树）
（1）.访问器属性:
1). 专门提供对一个普通属性的保护。
2). 每个访问器属性都包含一对儿, get和set函数
i. 当外界试图获取访问器属性的值时，自动调用访问器属性中的get
ii. 当外界试图修改访问器属性的值时，自动调用访问器属性中的set
b. new Vue()如何利用访问器属性:
1). data对象和methods对象进入new Vue()后会立刻被打散。data中的成员变量和methods中的成员函数，最终会直接隶属于new Vue()对象。且data中的变量和methods中的函数处于平级。所以methods中的函数才能用this.变量名方式访问data中的变量
所以，new Vue()中的几乎所有this，都指new Vue()对象！
2). new Vue()隐藏data中原变量。然后为data中每个变量分别设置访问器属性。
结果: 任何情况下操作data中的变量n，早就不是普通的变量了。实际操作的都是访问器属性。且，只要试图修改data中的变量n，都会自动调用访问器属性n的set函数！
3). new Vue()在每个访问器属性的set函数中悄悄内置了一个通知函数。只要试图修改变量，都会调用访问器属性的set，都会制定向外发出通知: “xx变量的值变了！快来拿新值！”
(2). 虚拟DOM树:
a. 什么是虚拟DOM树: vue通过扫描真实DOM树，只提取出个别可能发生变化的元素，组成的一个棵简化版的新的DOM树。
b. 优点：
1). 小, 只包含可能受影响的元素，不受影响的元素是不包含在内的
2). 遍历和查找快！
3). 更新效率高，因为每次只更新受影响的元素，不受影响的元素，不变的！
4). 避免重复代码。虚拟DOM树中已经提前封装了DOM增删改查操作！不用我们自己写！
c. 虚拟DOM树在绑定过程中如何发挥作用：
1). new Vue中任何位置修改了data中的变量，其实修改的都是访问器属性
2). 都会自动触发这个访问器属性的set，都会自动发出通知
3). new Vue接到通知遍历虚拟DOM树，只找受本次变量修改影响的个别DOM元素
4). 虚拟DOM树利用已经封装好的增删改查操作，仅更新页面上受影响的个别元素。而不是大范围替换界面元素。—— 效率远高于jQuery！