# vue双向数据绑定与抽象语法树

# 双向数据绑定原理
~~~
// 数据劫持/数据代理
object.defineProperty()
~~~
数组通过改写数组中push,pop,shift,unshift,splice,sort,reverse等方法实现数组的双向绑定。

vue的双向数据绑定，是采用数据劫持结合发布者和订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，getter函数里面执行的任务是watcher订阅者, 而setter函数执行的任务是发布者

# 抽象语法树(ast)
抽象语法树的本质上是一个JS对象，Vue在审视所有HTML结构时是以字符串的形式进行的，最终将其解析为JS对象。AST抽象语法树服务于模板编译，将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法，自己作为中转站。

# 抽象语法树和虚拟节点的关系
模板语法会变成抽象语法树AST，而抽象语法树最后不会变成虚拟节点，而是会直接变成渲染函数（h函数），h函数的执行会变成虚拟节点，虚拟节点经过diff 会在界面上显示。也就是说抽象语法树是不会 diff 的，diff 是用虚拟节点 diff 的，抽象语法树也不是直接生成 虚拟节点 的。