大前端【3-2】Vue响应式原理简述

数据响应式是指,当数据发生变化自动更新视图,不需要手动操作dom,

第一步、入口,initState()

vm状态的初始化,整个响应式是从init方法中开始的,在init方法中,调用initState方法初始化状态,在initState方法中调用initData(),将data属性注入到vue实例上,并且调用observe()将其转化为响应式对象,observe是响应式的入口

第二步、observe(value)

位于src/core/observer/index.js,首先判断value是否是对象,如果不是对象直接返回,判断value对象是否有

__ob__,如果有证明value已经做过响应化处理,是响应式数据,则直接返回,如果没有,则在第三步创建observer对象,并将其返回。

第三步、Observe()

位于src/core/observer/index.js,给value对象定义不可枚举的__ob__属性,记录当前的observer对象,进行数组的响应化处理,设置数组中的方法push、pop、sort等,这些方法会改变原数组,所以当这些方法被调用的时候,会发送通知,找到observe对象中的dep,调用dep.notify()方法,然后调用数组中的每一个成员,对其进行响应化处理,如果成员是对象,也会将转化为响应式对象,如果value是对象的话,会调用walk(),遍历对象中的每一个成员,调用defineReactive()

第四步、defineReactive

src/core/observer/index.js,为每一个属性创建dep对象,如果当前属性是对象,递归调用observe().

getter:为每一个属性收集依赖,如果当前属性是对象,也为对象的每一个属性收集依赖,最终返回属性值。

setter:保存新值,如果新值是对象,则调用observe,派发更新(发送通知),调用dep.notify()

第五步、依赖收集

在watcher对象的get方法中调用pushTarget,会把当前的watcher记录Dep.target属性,访问的data成员的时候收集依赖,访问值的时候会调用defineReactive的getter中收集依赖,把属性对应的watcher对象添加到dep的subs数组中,如果属性是对象,则给childOb收集依赖,目的是子对象添加和删除成员时发送通知。

第六步、Watcher

当数据发生变化时,会调用dep.notify(),调用watcher对象的update()方法,在update方法中会调用queueWatcher(),方法中会判断watcher是否被处理,如果没有,则将其添加到queue队列中,并调用flushSchedulerQueue()刷新任务队列,在flushSchedulerQueue中,会触发beforeUpdate钩子函数,然后调用watcher.run(),然后清空上一次的依赖,触发actived钩子函数,触发update钩子函数。

猜你喜欢

转载自blog.csdn.net/qiuqiu1628480502/article/details/108504835