Vue basic knowledge

To avoid errors, glitches, and antipatterns, compile a document for reference and update it from time to time as a record of job search and foundation building.

1. V-if and V-show are used in different scenarios

v-if

Is true conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during the switch; Also lazy: if the condition is false during the initial render, nothing is done — the conditional block does not start rendering until the condition is true for the first time.

Note the following points:

  • A piece of code whose conditions rarely change at run time is usedv-ifGood (v-if Higher switching overhead)
  • andkeyCombined use to manage reusable elements (Vue renders elements as efficiently as possible, often reusing existing elements rather than rendering them from scratch)
  • andtemplateTogether, blocks of code can be rendered in groups
  • andv-elseorv-else-ifUse a combination of
  • Used on componentsv-ifTrigger a component’s lifecycle function
  • withv-forWhen used in combination,v-for 比 v-ifHas a higher priority
  • withtransitionUsed in combination this command can trigger transitions when conditions change (used for animation switching)
  • withkeep-aliveThis combination preserves component state and avoids re-rendering

v-show

The DOM will be rendered and shown and hidden according to the value of v-show. If the current element has frequent switching operations, v-show is recommended to implement.

Note the following points:

  • You need to switch a block of code very frequently to usev-showApply colours to a drawing
  • This command triggers transition effects when conditions change (used for animation switching)
  • Not available for components
  • No conditional statement

Two things in common

  • When both arefalseWill not occupy the page position (v-ifIs to remove the dom,v-showIs to switch the dispaly state)
  • Transitions are triggered whenever conditions change (for animation switching)

The principle of analysis

We know the rendering logic of Vue. First of all, we need to convert the template into JS code, that is, v-if, V-for, V-modal, etc. in the template for event monitoring, and convert them into executable JS code (namely render function), because JS logic is a Turing-complete language. The render function is then executed to handle the template conversion to HTML. During this process v-if and V-show are resolved.

V-if creates elements dynamically just like if() and else(). Note that if v-if controls components, event listeners and subcomponents within the condition block are destroyed and rebuilt appropriately during the switch, i.e. the life cycle of the component and subcomponent is touched.

If there is v-if in the element, add the v-if condition to the el.ifConditions. If there is V-else, V-else -if attribute, set the corresponding flag position to true. When the current ele has a V-else or V-elseif attribute, you need to deal with the if attribute, which must exist in the parent element of the V-if attribute, and then add the else-if expression of the current element to the ifConditions of the previous element. Then the AST tree is generated. After the AST tree is generated, the corresponding attributes of the tree are mounted. To generate the corresponding render function. Finally, when the render function is executed, the value of the binding variable in the Vue determines which part of the template to create.

The implementation of V-show can be seen in the following figure:

  • First of all, bywidthDirectivesTo generate the finalVNode. It will giveVNodeThe bindingdirAttributes, i.e.,vShowPairs of elements defined in the life cycleCSS displayHandling of attributes
  • Secondly, in thepatchElementPhase, will registerpostRenderEffectEvent for invokingvShowThe definition of theupdateLife cycle processingCSS displayLogic of attributes
  • Finally, at the end of distributing updates, callpostRenderEffectEvent, that is, executionvShowThe definition of theupdateLife cycle, changes the element’sCSS displayattribute

summary

Once you understand the principle, you can see why V-if has a higher switching overhead and V-show has a higher initial rendering overhead. Learning source code is a boring process, but if you can insist, there will be harvest.

Pay attention to

The official documentation provides a few cautions to keep in mind in the official documentation style guide