美文网首页
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数据响应化流程

    Observer->如果是object-> defineReactive遍历key 创建dep跟key挂钩,当wa...

  • Vue原理

    vue原理相关 Vue核心概念 vue实例化 虚拟dom 模板编译 数据绑定(响应式) 组件化 MVVM mode...

  • vue原理相关

    Vue核心概念 vue实例化 虚拟dom 模板编译 数据绑定(响应式) 组件化 MVVM model和view层通...

  • Vue的特点

    vue两大特点:响应式编程、组件化。 vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、...

  • 前端面试题【Day02】

    本篇绪论 1,Vue响应式原理 1,Vue响应式原理 在vue实例中声明的数据就是响应式的。响应式:数据发生改变,...

  • vue的优势

    vue是单页面应用,页面局部刷新 ,响应的数据绑定/响应式编程,组件化,轻量级框架,简单易学,双向数据绑定,视图数...

  • vuejs教程

    vue通过简单的API实现响应的数据绑定和组合的视图组件。 每个vue应用都需要实例化vue来实现。 var vm...

  • 我的前端进阶之路

    React和Vue对比 相同点: 数据驱动视图,提供了响应式(Reactive)和组件化(Composable)的...

  • 2020-12-25

    Vue数据响应式 响应式:当一个物体对外界刺激做出反应,就是响应式。例如:我打你一拳你知道躲。 Vue 数据响应式...

  • Vue的响应式浅析

    1 Vue如何实现响应式? Vue的响应式是建立在监听data中的数据. 2 在Vue2中响应式的实现 Vue通过...

网友评论

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

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