MVVM设计模式：VUE的绑定原理
MVVM设计模式：VUE的绑定原理
①什么是MVVM设计模式：对前端代码三大部分的重新划分
②为什么使用：旧的前端代码划分方式，存在严重的问题
旧的前端代码划分方式：
1.HTML：定义网页的内容
2.CSS：定义网页的样式
3.JS：定义网页的交互行为
问题：HTML和CSS中缺少程序的必要组成部分，没有变量，没有分支，没有循环。所有动态效果都需要js来负责修改和维护。js的压力极大，且步骤繁琐，重复代码极多。
③MVVM设计模式：新的前端代码划分：
1. 界面(View)：增强版的HTML和CSS
增强版的HTML提供了变量，分支和循环
2. 数据模型(Model)：专门保存页面所需的数据变量
3. 界面模型(ViewModel)：将数据模型和界面绑定在一起
绑定的结果：界面模型可自动维护数据模型中的变量值与界面中显示的内容一致
④VUE中如何实现数据绑定
(1）new vue()将data对象打散，使其成员变为单个属性，直接属于当前new vue()对象
(2) 为每个data中打散的单个属性请保镖（get()/set(value))。将来new vue内访问data中的属性名，其实是访问保镖，然后通过保镖操作的data中的属性。
(3) 每个属性的set方法，除了肩负修改data中属性值的功能外，还负责通过虚拟DOM树，哪个变量发生变化了。
(4) 然后new Vue()继续扫描el："#app"所指向的页面元素，及其子元素。构建虚拟DOM树。
⑤.虚拟DOM树：
(1) 什么是虚拟DOM树：仅保存页面中可能受影响的少量元素的简化版DOM树
(2) 为什么使用虚拟DOM树：
a.遍历快：因为虚拟DOM树比真实DOM树包含的DOM元素少的多，只包含受影响的个别元素。所以遍历快，可快速找到受影响的元素
b.效率高：仅更新本次受影响的少量DOM元素。修改量小，对DOM树影响少。
c.封装DOM操作，避免重复代码。虚拟DOM树中将DOM操作中重复的增删改查操作已经提前封装起来，不用再反复编写
(3)如何发挥作用：每次通过访问器修改new Vue中data中的变量，触发通知，通知虚拟DOM树哪个变量变化。然后，虚拟DOM树快速找到自己内部保存的受这个变量影响的少量元素。然后，利用提前封装好的DOM操作。然后，利用提前封装好的DOM操作，仅更新少量元素。
⑥new Vue()中的this：因为new Vue()中的其他成员：methods等，命运同data一样，一进入new Vue()就会被打散，其成员都直接隶属于new Vue()对象。所以最终，methods中的方法和data中的变量，其实是都直接隶属于new Vue()对象的。都是平级的。所以，methods中的方法可通过this. 变量名方式，访问data中的属性成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1. 引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<!--2. 定义HTML界面-->
<div id="app">
<button @click="doit(-1)">-</button>
<span>{{n}}</span>
<button @click="doit(+1)">+</button>
</div>
<!--3. 定义界面需要的数据模型-->
<script>
var data={
n:0
};
var methods={
doit(i){
this.n+=i;
//this.n+=-1;
//this.n+=+1;
this.n<0&&(this.n=0);
}
}
// 4. 用new Vue()将界面元素+数据+处理函数包裹起来
new Vue({
el:"#app",
data, //data:data
methods //methods:methods
})
</script>
</body>
</html>