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. 注意
    • 只能通过实例获取,才能触发
posted @ 2021-07-04 16:06  Ananiah  阅读(171)  评论(0编辑  收藏  举报