Vue数据响应化流程
2019-10-11 本文已影响0人
key君
Observer->如果是object-> defineReactive遍历key 创建dep跟key挂钩,当watcher会调用render函数,render函数会尝试get 触发get里面的依赖收集 让dep跟watcher建立关系 当set数据时watcher通知更新
_init()方法在src/core/instance/init.js文件里的。
_init()里面执行initState是响应化开始的入口
initState()里面调用initData()
initData()里面调用Observe()方法
Observe()会返回一个Observer
Observer实例里面会区分当前值类型 是对象 还是 数组
如果是对象的话:
然后走到defineReactive 遍历所有key 定义响应式
defineReactive里面会创建dep实例,跟key有挂钩关系,如果对象里面还是对象 就递归做响应化
当render函数访问属性的时候 调用getter的时候就会触发依赖收集
(依赖收集就是dep跟watcher建立关系)
为啥说dep跟watcher是多对多关系 dep里面有一个watcher dep还有一个newdeps数组 里面是dep(对象本身及内部所有key值)
render函数是watcher触发的
Observer->如果是Arrray->挂ob实例->覆盖数组原型方法->当更新数组时->ob把新值重新响应化->通知更新
如果是数组:
数组里面挂了一个observer去做更新
拦截7君子方法 覆盖数组原型方法
如果执行push方法 走到拦截 取出observer 把新值重新做响应化处理
再执行ob.dep.notify更新
数组也是对象 所以数组会跟dep产生关系
如果数组里面还有对象 会递归去做响应化