vue3响应式原理-effect

effect的基本实现

export let activeEffect = undefined;// 当前正在执行的effectclass ReactiveEffect {active = true;deps = []; // 收集effect中使用到的属性parent = undefined;constructor(public fn) { }run() {if (!this.active) { // 不是激活状态return this.fn();}try {this.parent = activeEffect; // 当前的effect就是他的父亲activeEffect = this; // 设置成正在激活的是当前effectreturn this.fn();} finally {activeEffect = this.parent; // 执行完毕后还原activeEffectthis.parent = undefined;}}
}
export function effect(fn, options?) {const _effect = new ReactiveEffect(fn); // 创建响应式effect_effect.run(); // 让响应式effect默认执行
}

依赖收集

get(target, key, receiver) {if (key === ReactiveFlags.IS_REACTIVE) {return true;}const res = Reflect.get(target, key, receiver);track(target, 'get', key);  // 依赖收集return res;
}

const targetMap = new WeakMap(); // 记录依赖关系
export function track(target, type, key) {if (activeEffect) {let depsMap = targetMap.get(target); // {对象：map}if (!depsMap) {targetMap.set(target, (depsMap = new Map()))}let dep = depsMap.get(key);if (!dep) {depsMap.set(key, (dep = new Set())) // {对象：{ 属性 :[ dep, dep ]}}}let shouldTrack = !dep.has(activeEffect)if (shouldTrack) {dep.add(activeEffect);activeEffect.deps.push(dep); // 让effect记住dep，这样后续可以用于清理}}
}

将属性和对应的effect维护成映射关系，后续属性变化可以触发对应的effect函数重新run

触发更新

set(target, key, value, receiver) {// 等会赋值的时候可以重新触发effect执行let oldValue = target[key]const result = Reflect.set(target, key, value, receiver);if (oldValue !== value) {trigger(target, 'set', key, value, oldValue)}return result;
}

export function trigger(target, type, key?, newValue?, oldValue?) {const depsMap = targetMap.get(target); // 获取对应的映射表if (!depsMap) {return}const effects = depsMap.get(key);effects && effects.forEach(effect => {if (effect !== activeEffect) effect.run(); // 防止循环})
}

分支切换与`cleanup`

在渲染时我们要避免副作用函数产生的遗留

const state = reactive({ flag: true, name: 'jw', age: 30 })
effect(() => { // 副作用函数 (effect执行渲染了页面)console.log('render')document.body.innerHTML = state.flag ? state.name : state.age
});
setTimeout(() => {state.flag = false;setTimeout(() => {console.log('修改name，原则上不更新')state.name = 'zf'}, 1000);
}, 1000)

function cleanupEffect(effect) {const { deps } = effect; // 清理effectfor (let i = 0; i < deps.length; i++) {deps[i].delete(effect);}effect.deps.length = 0;
}
class ReactiveEffect {active = true;deps = []; // 收集effect中使用到的属性parent = undefined;constructor(public fn) { }run() {try {this.parent = activeEffect; // 当前的effect就是他的父亲activeEffect = this; // 设置成正在激活的是当前effect
+           cleanupEffect(this);return this.fn(); // 先清理在运行}}
}

这里要注意的是：触发时会进行清理操作（清理effect），在重新进行收集（收集effect）。在循环过程中会导致死循环。

let effect = () => {};
let s = new Set([effect])
s.forEach(item=>{s.delete(effect); s.add(effect)}); // 这样就导致死循环了

停止effect

export class ReactiveEffect {stop(){if(this.active){ cleanupEffect(this);this.active = false}}
}
export function effect(fn, options?) {const _effect = new ReactiveEffect(fn); _effect.run();const runner = _effect.run.bind(_effect);runner.effect = _effect;return runner; // 返回runner
}

调度执行

trigger触发时，我们可以自己决定副作用函数执行的时机、次数、及执行方式

export function effect(fn, options:any = {}) {const _effect = new ReactiveEffect(fn,options.scheduler); // 创建响应式effect// if(options){//     Object.assign(_effect,options); // 扩展属性// }_effect.run(); // 让响应式effect默认执行const runner = _effect.run.bind(_effect);runner.effect = _effect;return runner; // 返回runner
}export function trigger(target, type, key?, newValue?, oldValue?) {const depsMap = targetMap.get(target);if (!depsMap) {return}let effects = depsMap.get(key);if (effects) {effects = new Set(effects);for (const effect of effects) {if (effect !== activeEffect) { if(effect.scheduler){ // 如果有调度函数则执行调度函数effect.scheduler()}else{effect.run(); }}}}
}

深度代理

get(target, key, receiver) {if (key === ReactiveFlags.IS_REACTIVE) {return true;}// 等会谁来取值就做依赖收集const res = Reflect.get(target, key, receiver);track(target, 'get', key);if(isObject(res)){return reactive(res);}return res;
}

当取值时返回的值是对象，则返回这个对象的代理对象，从而实现深度代理

总结

为了实现响应式，我们使用了new Proxy
effect默认数据变化要能更新，我们先将正在执行的effect作为全局变量，渲染（取值），然后在get方法中进行依赖收集
依赖收集的数据格式weakMap（对象：map（属性：set（effect））
用户数据发生变化，会通过对象属性来查找对应的effect集合，全部执行；
调度器的实现，创建effect时，把scheduler存在实例上，调用runner时，判断如果有调度器就调用调度器，否则执行runner

vue3响应式原理-effect相关推荐

vue2和vue3响应式原理
vue2响应式原理:核心使用Object.defineProperty给属性定义get和set方法注意:对象的多次递归,针对数组需要重写数组方法函数劫持:把函数内部进行重写同时继续调用老的方法,在 ...
vue3响应式原理之Ref
theme: fancy 一. Ref 用法这是 ref 最基本的用法,返回来的count是一个响应式的代理值 const count = ref(0) 二. 实现 1. ref 函数我们调用的r ...
vue2的响应式原理学“废”了吗？继续观摩vue3响应式原理Proxy
一文了解Vue3的响应式原理一.
Vue3 响应式原理
如何实现响应式作为一个高阶的概述,我们需要做到以下几点: 当一个值被读取时进行追踪当某个值改变时进行检测重新运行代码来读取原始值 Vue如何知道哪些代码在执行为了能够在数值变化时,随时运行我们 ...
vue3响应式原理-reflect
proxy负责对某个数据进行增删改查的监听,不过vue3底层不是直接对target进行如下的简单操作.而是利用es6的window.reflect 利用reflect取一个对象的属性利用reflec ...
手写简单vue3响应式原理(reactive ref toRef toRefs)
reactive ref toRef toRefs // 判断对象是否是对象 const isObject = val => val !== null && typeof val ...
Vue3的响应式原理解析
Vue3的响应式原理解析 Vue2响应式原理回顾 // 1.对象响应化:遍历每个key,定义getter.setter // 2.数组响应化:覆盖数组原型方法,额外增加通知逻辑 const origi ...
【Vue3中的响应式原理】
Vue3响应式原理在Vue2的响应式中,存在着新增属性,删除属性以及直接通过下标修改数组,但页面不会自动更新的问题.但是在Vue3中,这些问题都得以解决. Vue2中的响应式原理首先我们先看一下V ...
Day 05- Vue3 Vue2响应式原理
Vue2的响应式核心:通过 Object.defineProtytype() 对对象的已有属性值的读取和修改进行劫持: 数据劫持 --> 给对象扩展属性 --> 属性设置实现原理: ...
面试官：说说Vue响应式原理
前言: 经常有面试官会问"你能说说vue的响应式原理吗?很多不明就里的人会说是v-model,其实面试官想问的是vue能实现响应式使用的是JS中的什么API,而且v-model这个属于双向数 ...

vue3响应式原理-effect

effect的基本实现

依赖收集

触发更新

分支切换与`cleanup`

停止effect

调度执行

深度代理

总结

vue3响应式原理-effect相关推荐

最新文章

热门文章

vue3响应式原理-effect

effect的基本实现

依赖收集

触发更新

分支切换与cleanup

停止effect

调度执行

深度代理

总结

vue3响应式原理-effect相关推荐

最新文章

热门文章

分支切换与`cleanup`