vue源码探究(第五弹)

不知不觉，到了vue源码探究的最后一部分，也是最为复杂的一部分，数据劫持和数据的双向绑定。

数据劫持我们也可以称为数据绑定。

• 初始化显示：页面(表达式/指令)能从data读取数据显示(编译/解析)

• 更新显示：更新data中的属性数据 ===》 页面更新

• dep

  • 与data中的属性一一对应

• watcher

  • 与模板中一般指令/大括号表达式一一对应

1. 什么时候一个dep中关联多个watcher?
   多个指令或表达式用到了当前同一个属性 {{name}} {{name}}

2. 什么时候一个watcher中关联多个dep?
   多层表达式的watcher对应多个dep {{a.b.c}}

  
{{name}}
  

  

  更新

接下来讲讲什么是Dep？

• data中的每个属性(所有层次)都对应一个dep对象

• dep创建的时机？
  

  • 在初始化define data中，每个属性会创建对应的dep对象

  • 在data中的某个属性值被设置为新的对象的时候

• 个数
  

  • 与data中的属性一一对应

• dep对象的结构
  {
  id, // 每个dep都有一个唯一的id
  subs //包含n个对应watcher的数组(subscribes的简写) 它是一个array[]
  }
  

  • subs属性说明

    • 当一个watcher被创建时，内部会将当前watcher对象添加到对应的dep对象的subs中

    • 当此data属性的值发生变化时，所有subs中的watcher都会收到更新的通知，从而更新对应的界面

继续讲讲watcher

• 个数

  • 模板中每一个非事件指令或者表达式都对应一个watcher对象

    • 事件指令，eg:v-on、v-bind...

• 监视当前表达式数据的变化

• 创建的时机

  • 在初始化编译模板的时候

• watch对象的组成
  {
  vm, // vm对象
  exp, // 对应指令的表达式
  cb, // callback 当表达式所对应的数据发生变化时候的回调函数
  value, //当前表达式的值
  depIds // 表达式中各级属性所对应的dep对象的集合对象，它是一个对象object
  }

• 一个data中的属性对应一个dep，一个dep中可能包含多个watcher

  • 举个例子：模板中多个地方使用一个表达式或者说使用一个属性。

  • {{name}}

  • {{name}}

  • 这个时候，一个dep对应多个watcher

• 模板中每一个非事件指令或表达式都对应一个watcher，一个watcher中可能包含多个dep

  • 举个例子：表达式中包含了几个data属性

  • {{a.b.c}}

  • 这里的一个watcher，就对应了3个dep

• defineProperty()

• 消息订阅与发布