vue响应式流程
2021-02-16 17:50:08 8 举报vue响应式流程
作者其他创作
大纲/内容
initState()
dep.notify()
是否是Object
创建childOb
订阅观察目标Watcher.addDep(dep)
是否是新增数组方法
拦截修改数组方法ArrayMethods
给value中的每个属性调用defineReactive
是
数据类型是否是Array类型
否
调用原有get方法
开始
props/methods/methods/data初始化
结束
如果属性是对象类型，收集依赖到属性的__ob__.dep
new Observer(value)
observer(vm.$options.data;)
this.walk(value)
缓存get/set方法
未收集
添加观察者
实例化一个dep(依赖收集器)
是否属于数组内容变更
配置依赖观测
调用原有set方法
对新值进行observer
如果是数组则遍历每一个对象，收集依赖
将依赖收集到__ob__.dep
对新增值进行observeArray
依赖收集器把该观察者添加到subs队列中dep.addSub(this)
加入deps
数值变更
定义set方法
依赖收集
新增元素observer
initData(vm)
定义get方法
push/unshift/splice等操作，处理arguments获得新增数据
未缓存
收集依赖到属性的dep(dep.depend())
Dep.target.addDep(this)
value是否含有__ob__属性
ob = value.__ob__;
instance/init.js
加入newDeps
1.语言/技术框架/数据库 2.第三方接口/服务 3.硬件集成
this.value = value; this.dep = new Dep(); // 实例化一个观察目标对象 this.vmCount = 0;
数组中所有元素observe
执行原数组变异方法
0 条评论
下一页
