数据响应式过程
1.入口 src/core/instance/init.js
initstate(vm) vm状态的初始化
初始化了_data,_props,methods等
调用了 initData(vm)
-
在 initData中 获取传入的数据,调用observe方法接收data并做出响应式的处理
-
observe在接收数据,创建一个 new Observer对象,将其 对应的数据转换为set/get
-
Observer 中 缓存了对应的数据在_ob_上,对数组和对象做了对应的处理,
数组增强了一些原生的方法,例如push,等
对象的话,调用walk方法,遍历属性调用defineReactive转换为 响应式数据 -
defineReactive 中 会先将用户传入的get/set缓存起来,在进行是否是递归对象处理的执行
通过Object.defineProperty 进行set/get的 处理,
get中先调用用户传入的getter,然后返回值,中间会有通过Dep收集依赖过程 -
收集依赖的过程
6.1 在 defineReactive 创建 Dep的类,在get中进行依赖收集,就是将依赖该属性的Watcher对象添加到
Dep对象的subs数组中,数据发生变化时,通知所有的watcher,通过watcher的回调中实现更新
6.2 observe中的dep.depend是为子对象收集依赖,dep.target中存放watcher对象,dep.depend添加依赖,
在dep中,使用addDep收集依赖,缓存对应的ID