1.Vue的绑定原理:其实就是 new Vue的原理

(1).先创建一个vue类型的子对象

a.引入data对象:

1). 自动为data对象中每个变量都请了保镖(访问器属性)！
		结果: 任何位置访问data中的变量时，其实根本就不是直接访问data中变量，仅仅访问的是为data中的变量请的同名保镖而已
		结果: 只要外界试图修改data中的变量时，注定会触发保镖的set()方法。
2). new Vue()还自动在每个变量的set()函数内植入了一个通知函数
		结果: 只要外界试图修改data中的变量时，注定会触发保镖的set()方法中的通知函数。整个vue框架就知道一个变量的值被修改了！
复制代码

b.引入并打散methods对象:

1). Methods中所有函数默认直接隶属于new Vue()对象
		2). 导致methods中的函数进入new Vue()后和data中变量的保镖(访问器属性)平级
		3). 所以，methods中的方法想访问data中的变量，必须加this.变量名
复制代码

(2).构建虚拟DOM树:

a.什么是虚拟DOM树

通过扫描完整版DOM树创建出的一棵新DOM树
复制代码

b.过程

1). new Vue()会查找到el属性指定的界面上的父元素
2). 扫描找到的父元素及其子元素
3). 碰到"@事件名=函数名"，就自动翻译为on事件名=函数名——自动绑定事件
4). 碰到所有"{{变量名}}"：
	i. 先将可能变化的元素对象加入到虚拟DOM树中
	ii. 并且首次替换元素内容中{{变量名}}为变量的初始值
复制代码

(3)结果

每次只要data中的变量被修改时:

a. 自动调用变量的set()函数
b. set()中内置的通知函数向vue框架发出通知，说xx变量发生了改变
c. 框架会自动扫描虚拟DOM树
d. 查找受本次变量修改影响的所有DOM元素
e. 自动利用已经提前封装好的DOM增删改查操作，只更新页面上受影响的元素。其他不受该变量影响的元素，保持不变！
复制代码

(4)总结

1.VUE绑定原理

访问器属性+虚拟DOM树 
访问器属性+观察者模式+虚拟DOM 
复制代码

2.虚拟DOM树的优点

(1). 内容少！仅保存可能变化的元素。不变的元素一个都不包含
  (2). 遍历快！
  (3). 避免大量重复代码！——自动执行DOM增删改查操作
  (4). 效率高！每次变量更改时，只修改个别受影响的元素，其他元素保持不变！
复制代码