Vue 3.0 creates a render effect when the template is compiled to determine whether the subscription data is present. This effect is defined as follows:

const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG) => { // create reactive effect for rendering instance.update = effect(function componentEffect() { .... instance.isMounted = true; } else { ... } }, (process.env.NODE_ENV ! == 'production') ? createDevEffectOptions(instance) : prodEffectOptions); };Copy the code

Let’s briefly analyze setupRenderEffect(). It passes several arguments, which are:

  • instanceThe currentvmThe instance
  • initialVNodeIt could be a componentVNodeOr ordinaryVNode
  • containerMounted templates, for examplediv#appCorresponding node
  • anchor.parentSuspense.isSVGUnder normal circumstancesnull

The effect function is defined as follows

Function effect(fn, options = EMPTY_OBJ) {if (isEffect(fn)) {fn = fn.raw; } const effect = createReactiveEffect(fn, options); // If (! options.lazy) { effect(); } return effect; }Copy the code

Create a reactive effect

function createReactiveEffect(fn, options) { const effect = function reactiveEffect(... args) { return run(effect, fn, args); }; effect._isEffect = true; effect.active = true; effect.raw = fn; effect.deps = []; effect.options = options; return effect; } function run(effect, fn, args) { if (! effect.active) { return fn(... args); } if (! effectStack.includes(effect)) { cleanup(effect); try { enableTracking(); effectStack.push(effect); activeEffect = effect; return fn(... args); } finally { effectStack.pop(); resetTracking(); activeEffect = effectStack[effectStack.length - 1]; }}}Copy the code

Reference link: juejin.cn/post/684490…