Responsive Principle
Using Proxy as an interceptor in ES6, we collect dependencies when getting and trigger dependencies when setting to achieve responsiveness.
Handwriting implementation
1. Realize Reactive
Based on the principle, we can write a test case first
//
describe("effect", () => {
it("happy path", () => {
const original = { foo: 1 }; //Raw data const observed = reactive(original); //Responsive data expect(observed).(original);
expect().toBe(1); //Get data normally expect(isReactive(observed)).toBe(true);
expect(isReactive(original)).toBe(false);
expect(isProxy(observed)).toBe(true);
});
});
First, data interception processing is implemented, and the acquisition and assignment operations are realized through ES6's Proxy.
//
//Package new Proxy() export function reactive(raw) {
return createActiveObject(raw, mutableHandlers);
}
function createActiveObject(raw: any, baseHandlers) {
//Return a Proxy object directly to implement responsive return new Proxy(raw, baseHandlers);
}
//
//Extract a handler object export const mutableHandlers = {
get:createGetter(),
set:createSetter(),
};
function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
return function get(target, key) {
const res = (target, key);
// Check if res is an object if (isObject(res)) {
//If so, nesting is performed so that the object in the returned object is also responsive return isReadOnly ? readonly(res) : reactive(res);
}
if (!isReadOnly) {
//If it is not readonly type, collect dependencies track(target, key);
}
return res;
};
}
function createSetter() {
return function set(target, key, value) {
const res = (target, key, value);
//Trigger dependency trigger(target, key);
return res;
};
}From the above code, we can notice that track(target, key) and trigger(target, key) are the two functions, respectively, collect and trigger dependencies.
Dependency: We can think of a dependency as wrapping the user's manipulation of data (user functions, side effect functions) into something. When we get it, we collect the dependencies one by one, and trigger them all when set, and realize responsive effects.
2. Implement dependency collection and triggering
// //Global variables let activeEffect: ReactiveEffect; //Current dependencies let shouldTrack: Boolean; //Whether to collect dependencies const targetMap = new WeakMap(); //Dependency Tree
targetMap structure:
targetMap: {
Each target (depsMap): {
Each key (depSet):[
Every dependency
]
}
}
The difference between WeakMap and Map
1. WeakMap only accepts objects as keys. If other types of data are set as keys, an error will be reported.
2. The objects referenced by the WeakMap key are weak references. As long as other references of the object are deleted, the garbage collection mechanism will free the memory occupied by the object, thereby avoiding memory leakage.
3. Since WeakMap members may be recycled by the garbage collection mechanism at any time, the number of members is unstable, so there is no size attribute.
4. There is no clear() method
5. Cannot go through
First, we define a dependency class called ReactiveEffect, which wraps the user function and gives some attributes and methods. refer to:Detailed answers to front-end handwritten interview questions
//
//Responsive dependencies — ReactiveEffect class class ReactiveEffect {
private _fn: any; //User function, active = true; // Indicates whether the current dependency is activated, if cleared, it is false deps: any[] = []; //Deps containing the dependency onStop?: () => void; //Stop the callback function of the dependency public scheduler: Function; //Scheduling function //Constructor constructor(fn, scheduler?) {
this._fn = fn;
= scheduler;
}
//Execute side effect functions run() {
//User function can report an error and need to be wrapped in try try {
//If the current dependency is not activated, no dependency collection is performed, return directly if (!) {
return this._fn();
}
//Open dependency collection shouldTrack = true;
activeEffect = this;
//The dependency collection will be triggered when calling const result = this._fn();
//Close dependency collection shouldTrack = false;
//Return result return result;
} finally {
//todo
}
}
}
effect effect function
Create a user function function, called effect. The function of this function creates a dependency based on the ReactiveEffect class, triggers the user function (when it is triggered, the dependency collection is triggered), and returns the user function.
//Create a dependency export function effect(fn, option: any = {}) {
//Create a responsive instance for the current dependency const _effect = new ReactiveEffect(fn, );
(_effect, option);
//The first call is called once, which will trigger the dependency collection _effect.run() -> _fn() -> get() -> track() _effect.run();
const runner: any = _effect.(_effect);
//mount the dependency on the runner to facilitate access to the dependency through the runner in other places = _effect;
return runner;
}
bind(): Create a new function based on the original function, so that this of the new function points to the first parameter passed, and other parameters are used as parameters of the new function
When a user triggers a dependency collection, the dependency is added to the targetMap.
Collect/add dependencies
//Add dependencies to the target key corresponding to the targetMap, and retrieve it in trigger when reset export function track(target: Object, key) {
//If it is not the state of track, return directly if (!isTracking()) return;
// target -> key -> dep
//Get the corresponding target. If you cannot get it, create one and add it to the targetMap let depsMap = (target);
if (!depsMap) {
(target, (depsMap = new Map()));
}
//Get the corresponding key, if you cannot get it, create one and add it to the target let depSet = (key);
if (!depSet) {
(key, (depSet = new Set()));
}
//If the dependency already exists in the depSet, return it directly if ((activeEffect)) return;
//Add dependencies trackEffects(depSet);
}
export function trackEffects(dep) {
//Add dependencies to target (activeEffect);
//Add to the currently dependant deps array (dep);
}
Trigger dependency
// Trigger all dependencies of the corresponding key in the target at one time export function trigger(target, key) {
let depsMap = (target);
let depSet = (key);
//Trigger dependency triggerEffects(depSet);
}
export function triggerEffects(dep) {
for (const effect of dep) {
if () {
();
} else {
();
}
}
}
3. Remove/stop dependencies
In the ReactiveEffect class, we add a stop method to suspend dependencies collection and clear existing dependencies
//Responsive dependencies — class class ReactiveEffect {
private _fn: any; //User function, active = true; // Indicates whether the current dependency is activated, if cleared, it is false deps: any[] = []; //Deps containing the dependency onStop?: () => void; //Stop the callback function of the dependency public scheduler: Function; //Scheduling function //...
stop() {
if () {
cleanupEffect(this);
//Execute callback if () {
();
}
//Clear the activation state = false;
}
}
}
//Clear the dependency in each item of the deps mounted by the dependency function cleanupEffect(effect) {
((dep: any) => {
(effect);
});
= 0;
}
//Remove a dependency export function stop(runner) {
();
}
Derivative Types
1. Realize readonly
Compared with reactive, readonly is relatively simple in implementation. It is a read-only type that does not involve set operations, and does not require collection/trigger dependencies.
export function readonly(raw) {
return createActiveObject(raw, readonlyHandlers);
}
export const readonlyHandlers = {
get: readonlyGet,
set: (key, target) => {
(`key:${key} set fail，becausetargetIt's onereadonlyObject`, target);
return true;
},
};
const readonlyGet = createGetter(true);
function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
return function get(target, key) {
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadOnly;
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadOnly;
}
//...
// Check if res is an object if (isObject(res)) {
return isReadOnly ? readonly(res) : reactive(res);
}
if (!isReadOnly) {
//Collect dependencies track(target, key);
}
return res;
};
}
2. Implement shallowReadonly
Let's first look at the meaning of shallow
shallow: not deep, shallow, not deep, not serious, shallow, shallow, shallow.
Then shallowReadonly refers to limiting only the outermost layer, while the inner layer is still a normal and normal value.
//
export function shallowReadonly(raw) {
return createActiveObject(raw, shallowReadonlyHandlers);
}
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
get: shallowReadonlyGet,
});
const shallowReadonlyGet = createGetter(true, true);
function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
return function get(target, key) {
//..
const res = (target, key);
//If it is shallow, if it is, it will be very direct to return if (shallow) {
return res;
}
if (isObject(res)) {
//...
}
};
}
3. Implement ref
Ref is relatively reactive, in fact, it does not have a nested relationship, it is just a value.
//
export function ref(value: any) {
return new RefImpl(value);
}
Let's implement the RefImpl class. The principle is actually similar to reactive, but there are some details.
//
class RefImpl {
private _value: any; //Converted value public dep; //Depend on container private _rawValue: any; //The original value, public _v_isRef = true; //Judge ref type constructor(value) {
this._rawValue = value; //Record original value this._value = convert(value); //Store the converted value = new Set(); //Create dependency container }
get value() {
trackRefValue(this); //Collect dependencies return this._value;
}
set value(newValue) {
//The old and new values are different, so the change is triggered if (hasChanged(newValue, this._rawValue)) {
// Make sure to modify the value first and then trigger the dependency this._rawValue = newValue;
this._value = convert(newValue);
triggerEffects();
}
}
}
//
//Convert the value (value may be object) export function convert(value: any) {
return isObject(value) ? reactive(value) : value;
}
export function trackRefValue(ref: RefImpl) {
if (isTracking()) {
trackEffects();
}
}
//
export function isTracking(): Boolean {
//Whether to enable collection dependencies & whether there is a dependency return shouldTrack && activeEffect !== undefined;
}
export function trackEffects(dep) {
(activeEffect);
(dep);
}
export function triggerEffects(dep) {
for (const effect of dep) {
if () {
();
} else {
();
}
}
}Implement proxyRefs
//Implement the proxy to the ref object //For example user = { // age:ref(10),
// ...
//}
export function proxyRefs(ObjectWithRefs) {
return new Proxy(ObjectWithRefs, {
get(target, key) {
// If it is ref, return .value //If not, return value return unRef((target, key));
},
set(target, key, value) {
if (isRef(target[key]) && !isRef(value)) {
target[key].value = value;
return true; //?
} else {
return (target, key, value);
}
},
});
}
4. Implement computed
The implementation of computered is also clever, using the scheduler mechanism and a private variable _value to implement cache and lazy evaluation.
It can be understood through annotation (1) (2) (3)
//computed
import { ReactiveEffect } from "./effect";
class computedRefImpl {
private _dirty: boolean = true;
private _effect: ReactiveEffect;
private _value: any;
constructor(getter) {
//When creating, a responsive instance will be created and mounted this._effect = new ReactiveEffect(getter, () => {
//(three) // When the listener's value changes, set will be triggered, and the current dependency will be triggered. //Because there is a scheduler, the user fn will not be executed immediately (lazy is implemented), but instead, the _dirty will be changed to true //The next time the user gets, the run method will be called and the latest value will be returned. if (!this._dirty) {
this._dirty = true;
}
});
}
get value() {
//(one) //Default_dirty is true //Then the first time you get it, the run method of the responsive instance will be triggered and the dependency collection will be triggered. // At the same time, get the user fn value, store it, and then return it to if (this._dirty) {
this._dirty = false;
this._value = this._effect.run();
}
//(two) // When the listener's value has not changed, _dirty is always false //So, when you get the second time, because _dirty is false, then the stored _value is directly returned return this._value;
}
}
export function computed(getter) {
//Create a computed instance return new computedRefImpl(getter);
}
Tools
//Is it a reactive responsive type export function isReactive(target) {
return !!target[ReactiveFlags.IS_REACTIVE];
}
//Is it readonly responsive type export function isReadOnly(target) {
return !!target[ReactiveFlags.IS_READONLY];
}
//Is it a responsive object? export function isProxy(target) {
return isReactive(target) || isReadOnly(target);
}
//Is it an object export function isObject(target) {
return typeof target === "object" && target !== null;
}
//Is it a ref export function isRef(ref: any) {
return !!ref._v_isRef;
}
//Deconstruct ref export function unRef(ref: any) {
return isRef(ref) ? : ref;
}
//Is it changing export const hasChanged = (val, newVal) => {
return !(val, newVal);
};
The basis for judging the responsive type is that when getting, check whether the passed key is equal to a certain enum value as the basis for judgment, and add it in the get
//
export const enum ReactiveFlags {
IS_REACTIVE = "__v_isReactive",
IS_READONLY = "__v_isReadOnly",
}
//
function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) {
return function get(target, key) {
//...
if (key === ReactiveFlags.IS_REACTIVE) {
return !isReadOnly;
} else if (key === ReactiveFlags.IS_READONLY) {
return isReadOnly;
}
//...
};
}This is the end of this article about in-depth understanding of the principle of Vue3 responsiveness. For more related content on the principle of Vue3 responsiveness, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!