联谊会建设网站,网站开发超速云,赣州网站设计有哪些,辽阳专业建设网站公司电话号码响应式的本质#xff1a;当数据变化后会自动执行某个函数映射到组件#xff0c;自动触发组件的重新渲染。 响应式的实现方式就是劫持数据#xff0c;Vue3的reactive就是通过Proxy劫持数据#xff0c;由于劫持的是整个对象#xff0c;所以可以检测到任何对象的修改#xf…
响应式的本质当数据变化后会自动执行某个函数映射到组件自动触发组件的重新渲染。 响应式的实现方式就是劫持数据Vue3的reactive就是通过Proxy劫持数据由于劫持的是整个对象所以可以检测到任何对象的修改弥补了2.0的不足。
名词解释 **副作用函数**函数的执行会直接或间接影响其他函数的执行这时我们说函数产生了副作用。副作用很容易产生例如一个函数修改了全局变量这其实也是一个副作用。targetmap 是一个 weakmap 类型的集合用来存储副作用函数从类型定义可以看出 targetmap的数据结构方式 weakmap 由 target -- map 构成 map 由 key -- set 构成 其中 weakmap 的键是原始对象 targetweakmap 的值是一个 map 实例map 的键是原始对象 target 的 keymap 的值是一个由副作用函数组成的 set。effect函数创建一个副作用函数接受两个参数分别是用户自定义的fn函数和options 选项。track收集依赖访问数据的时候触发get函数get函数最核心的部分是执行track函数收集依赖。这其实是一种懒操作。trigger派发更新当对属性进行赋值时会触发代理对象的 set 拦截函数执行。 track函数收集依赖的实现 export function track(target: object, type: trackoptypes, key: unknown) {// 如果开启了依赖收集并且有正在执行的副作用则收集依赖if (shouldtrack activeeffect) {// 在 targetmap 中获取对应的 target 的依赖集合let depsmap targetmap.get(target)if (!depsmap) {// 如果 target 不在 targetmap 中则将当前 target 添加进 targetmap 中并将 targetmap 的 value 初始化为 new map()。targetmap.set(target, (depsmap new map()))}// 从依赖集合中获取对应的 key 的依赖let dep depsmap.get(key)if (!dep) {// 如果 key 不存在将这个 key 作为依赖收集起来并将依赖初始化为 new set()depsmap.set(key, (dep createdep()))}// 最后调用 trackeffects收集副作用函数将副作用函数收集到依赖集合depsmap中。const eventinfo __dev__? { effect: activeeffect, target, type, key }: undefinedtrackeffects(dep, eventinfo)}
}trackeffects 函数
收集副作用函数在 trackeffects 函数中检查当前正在执行的副作用函数 activeeffect 是否已经被收集到依赖集合中如果没有就将当前的副作用函数收集到依赖集合中。同时在当前副作用函数的 deps 属性中记录该依赖。 // 收集副作用函数在 trackeffects 函数中检查当前正在执行的副作用函数 activeeffect 是否已经被收集到依赖集合中如果没有就将当前的副作用函数收集到依赖集合中。同时在当前副作用函数的 deps 属性中记录该依赖。
export function trackeffects(dep: dep,debuggereventextrainfo?: debuggereventextrainfo
) {let shouldtrack falseif (effecttrackdepth maxmarkerbits) {if (!newtracked(dep)) {dep.n | trackopbit // set newly trackedshouldtrack !wastracked(dep)}} else {// full cleanup mode.// 如果依赖中并不存当前的 effect 副作用函数shouldtrack !dep.has(activeeffect!)}if (shouldtrack) {// 将当前的副作用函数收集进依赖中dep.add(activeeffect!)// 并在当前副作用函数的 deps 属性中记录该依赖activeeffect!.deps.push(dep)if (__dev__ activeeffect!.ontrack) {activeeffect!.ontrack(object.assign({effect: activeeffect!},debuggereventextrainfo))}}
}trigger 派发更新
对属性进行赋值时会触发代理对象的 set 拦截函数执行如下面的代码所示
const obj { foo: 1 }
//通过代理对象p 访问 foo 属性便会触发 set 拦截函数的执行
const p new proxy(obj, {// 拦截设置操作set(target, key, newval, receiver){// 如果属性不存在则说明是在添加新属性否则设置已有属性const type object.prototype.hasownproperty.call(target,key) ? set : add // 设置属性值const res reflect.set(target, key, newval, receiver)// 把副作用函数从桶里取出并执行将 type 作为第三个参数传递给 trigger 函数trigger(target,key,type) return res}// 省略其他拦截函数
})p.foo 2trigger 函数
根据target和key, 从targetMap中找到相关的所有副作用函数遍历执行一遍。
export function trigger(target: object,type: triggeroptypes,key?: unknown,newvalue?: unknown,oldvalue?: unknown,oldtarget?: mapunknown, unknown | setunknown
) {
//首先检查当前 target 是否有被追踪如果从未被追踪过即target的依赖未被收集则不需要执行派发更新直接返回即可。const depsmap targetmap.get(target)// 该 target 从未被追踪则不继续执行if (!depsmap) {// never been trackedreturn}// 接着创建一个 set 类型的 deps 集合用来存储当前target的这个 key 所有需要执行派发更新的副作用函数。let deps: (dep | undefined)[] []//接下来就根据操作类型type 和 key 来收集需要执行派发更新的副作用函数。//如果操作类型是 triggeroptypes.clear 那么表示需要清除所有依赖将当前target的所有副作用函数添加到 deps 集合中。if (type triggeroptypes.clear) {// collection being cleared// trigger all effects for target// 当需要清除依赖时将当前 target 的依赖全部传入deps [...depsmap.values()]} else if (key length isarray(target)) {// 处理数组的特殊情况depsmap.foreach((dep, key) {// 如果对应的长度, 有依赖收集需要更新if (key length || key (newvalue as number)) {deps.push(dep)}})} else {// schedule runs for set | add | delete// 在 set | add | delete 的情况添加当前 key 的依赖if (key ! void 0) {deps.push(depsmap.get(key))}// also run for iteration key on add | delete | map.setswitch (type) {case triggeroptypes.add:if (!isarray(target)) {deps.push(depsmap.get(iterate_key))if (ismap(target)) {// 操作类型为 add 时触发map 数据结构的 keys 方法的副作用函数重新执行deps.push(depsmap.get(map_key_iterate_key))}} else if (isintegerkey(key)) {// new index added to array - length changesdeps.push(depsmap.get(length))}breakcase triggeroptypes.delete:if (!isarray(target)) {deps.push(depsmap.get(iterate_key))if (ismap(target)) {// 操作类型为 delete 时触发map 数据结构的 keys 方法的副作用函数重新执行deps.push(depsmap.get(map_key_iterate_key))}}breakcase triggeroptypes.set:if (ismap(target)) {deps.push(depsmap.get(iterate_key))}break}}const eventinfo __dev__? { target, type, key, newvalue, oldvalue, oldtarget }: undefinedif (deps.length 1) {if (deps[0]) {if (__dev__) {triggereffects(deps[0], eventinfo)} else {triggereffects(deps[0])}}} else {const effects: reactiveeffect[] []// 将需要执行的副作用函数收集到 effects 数组中for (const dep of deps) {if (dep) {effects.push(...dep)}}if (__dev__) {triggereffects(createdep(effects), eventinfo)} else {triggereffects(createdep(effects))}}
}triggereffects 函数
triggereffects 函数中遍历需要执行的副作用函数集合如果当前副作用函数存在调度器则执行该调度器否则直接执行该副作用函数的 run 方法执行更新。
//triggereffects 函数中遍历需要执行的副作用函数集合如果当前副作用函数存在调度器则执行该调度器否则直接执行该副作用函数的 run 方法执行更新。
export function triggereffects(dep: dep | reactiveeffect[],debuggereventextrainfo?: debuggereventextrainfo
) {// spread into array for stabilization// 遍历需要执行的副作用函数集合 for (const effect of isarray(dep) ? dep : [...dep]) {// 如果 trigger 触发执行的副作用函数与当前正在执行的副作用函数相同则不触发执行if (effect ! activeeffect || effect.allowrecurse) {if (__dev__ effect.ontrigger) {effect.ontrigger(extend({ effect }, debuggereventextrainfo))}if (effect.scheduler) {// 如果一个副作用函数存在调度器则调用该调度器effect.scheduler()} else {// 否则直接执行副作用函数effect.run()}}}
}ES6 Proxy 方法
const p new Proxy(person, { //创建代理// 查get(target,propName){console.log(有人读取了p身上的${propName})return target[propName]; //反射return Reflect.get(target,propName)},// 改 增set(target, propName, value){console.log(有人修改了p身上的${propName}属性);target[propName] value;},// 删deleteProperty(target, propName){console.log(有人删除了p身上的${propName}属性)return delete target[propName];},});createReactiveObject
之前说到的createReactiveObject我们接下来看看createReactiveObject发生了什么。
返回 proxy
const collectionTypes new SetFunction([Set, Map, WeakMap, WeakSet])
function createReactiveObject(target: unknown,toProxy: WeakMapany, any,toRaw: WeakMapany, any,baseHandlers: ProxyHandlerany,collectionHandlers: ProxyHandlerany
) {/* 判断目标对象是否被effect *//* observed 为经过 new Proxy代理的函数 */let observed toProxy.get(target) /* { [target] : obseved } */if (observed ! void 0) { /* 如果目标对象已经被响应式处理那么直接返回proxy的observed对象 */return observed}if (toRaw.has(target)) { /* { [observed] : target } */return target}/* 如果目标对象是 Set, Map, WeakMap, WeakSet 类型那么 hander函数是 collectionHandlers 否侧目标函数是baseHandlers */const handlers collectionTypes.has(target.constructor)? collectionHandlers: baseHandlers/* TODO: 创建响应式对象 */observed new Proxy(target, handlers)/* target 和 observed 建立关联 */toProxy.set(target, observed)toRaw.set(observed, target)/* 返回observed对象 */return observed
}Vue3响应式内部原理_vue3的响应式原理_monana6的博客-CSDN博客
vue3.0 响应式原理(超详细)_vue3响应式原理_我不是外星人Alien的博客-CSDN博客
【干货】这次终于把 Vue3 响应式原理搞懂了_傲娇的koala的博客-CSDN博客
ES6 之 Proxy 介绍_es6 proxy_barnett_y的博客-CSDN博客
vue3.0 响应式原理(超详细)_vue3响应式原理_我不是外星人Alien的博客-CSDN博客
