2. vue中数据双向绑定原理

数据驱动视图

1. 命令式和声明式

  * 命令式：命令机器去做，按照你的命令去执行；如：for循环
  * 声明式：告诉机器你想要什么，让机器去完成；如：forEach

2. Observer函数和complie函数

  * Observer函数
    1. 劫持并监听所有属性 -- 在Observer函数中：完成getter和setter操作
    2. 本质:
          * vue2.0  采用Object.defineProperty()
          * vue3.0  采用Proxy()
          * 区别：
                1. Proxy() 可以对整个对象进行劫持
                2. defineProperty() 一个一个劫持。 数据：遍历进行劫持；对象：递归进行劫持
  * complie函数 进行视图处理

3. 双向绑定实现步骤

   1. 实现一个监听器Observer
      * 对数据进行便利，每一个都加上getter和setter，给数据赋值的时候，触发setter从而实现数据的监听
   2. 实现一个解析器complie
      * 解析vue模板指令，将模板中的变量换成数据，初始化渲染页面
      * 并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新
   3. 实现一个订阅者Watcher      
      * Watcher订阅着是数据(Observer)和视图(complie)之间通信的桥梁
      * 主要人物是订阅Observer中的属性变化的消息，当收到属性值变化的消息时，触发解析器Complie中的对应的更新函数
   4. 实现一个订阅器  Dep
      * 订阅器采用 发布--订阅 模式，用来收集订阅者Watcher，对监听器Observer和Watcher进行统一管理

Object.defineProperty()

1. 语法 Object.defineProperty(obj, prop, descriptor)；
   • obj 要定义属性的对象
   • prop 要定义或修改的属性名称
   • descriptor 要定义或修改的属性描述符（是一个对象）

Proxy()

1. 定义
   • 监听某个对象，把监听的对象克隆一份给Proxy代理
   • 原对象没有变化。该Proxy()构造函数用于创建Proxy()对象
     2.语法
   • new Proxy(target, handle)
   • target: 要包装的目标对象Proxy，它可以是任何类型的对象
   • handle: 一个对象，其属性是定义对Proxy执行操作时的行为的函数
2. 注意
   • 只能通过实例获取，才能触发