Vue数据双向绑定

双向数据绑定原理

原理:

• vue双向数据绑定是通过数据劫持,结合订阅者、发布者模式的方式,利用Object.defineProperty()来劫持
  各个属性的getter和setter,在数据发生改变时,通知订阅者触发监听回调,更新视图.

具体步骤:

• 第一步:通过observer给每个属性添加getter和setter监听数据的变化

• 第二步:通过compile解析模板指令,将变量替换为数据,然后初始化渲染页面,并将每一个指令对应的节点
  绑定视图更新函数,添加监听数据的订阅者,数据发生改变更新视图.

• 第三步:watcher是observer和compile的桥梁,监听属性当属性发生改变,通知订阅者调用视图更新函数更新视图

• 第四步:MVVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数
  据变化,通过compile来解析编译模板指令,最终利用watcher搭起observer和compile之间的通信桥梁,达到
  数据变化 - 视图更新,视图交互变化(input) - 数据model变更的双向绑定效果.

Object.defineProperty()

介绍:
Object.defineProperty(obj,prop,descriptor),它有三个参数,分别是:

• obj:要定义其上属性的对象
• prop:要定义或修改的属性
• descriptor:具体的方法
  简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法