美文网首页
Vue数据响应化流程

Vue数据响应化流程

作者: key君 | 来源:发表于2019-10-11 18:54 被阅读0次
    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产生关系
    如果数组里面还有对象 会递归去做响应化

    相关文章

      网友评论

          本文标题:Vue数据响应化流程

          本文链接:https://www.haomeiwen.com/subject/tfrtmctx.html