01. V – show and v – if

(1) Difference

  • V-if is true conditional rendering and does not start rendering until the condition is true for the first time (lazy loading)

    • The V-if directive destroys and rebuilds DOM nodes directly, allowing elements to be shown and hidden

  • Will v-show render regardless of initial conditions and simply switch based on the display property of CSS

    • v-showCSS level onlydisplay: none; 和 display: block;Switching between

(2) Usage scenarios

  • v-ifSuitable for scenes that do not require frequent condition switching (render in one go)
    • Use trigger component lifecycles on components
  • v-showIs suitable for scenarios that require very frequent switching conditions
    • Not available for components

(3) Performance optimization

  • How to usev-ifPerformance tuning?
    • Because whenv-if="false"Internal components are not rendered
    • So when certain conditions render part of a component (or content), you can set the conditions tofalse
    • Set to if necessarytrue(or through asynchronous operations such as$nextTick)
    • This gives priority to rendering other important content, which can be used wisely for performance optimization

02. V – if and v – for

You should avoid using v-if in V-for

(1) Priority

  • 1.v-forPrior to thev-ifBe parsed
  • 2. If it happens at the same time, each render will execute a loop before judging the condition, so the loop is inevitable anyway, wasting performance
  • 3. To avoid this, nest in the outer layer<template>, on this floorv-ifJudge, and then do it internallyv-forcycle
  • 4. If the condition is present inside the loop, you can filter out the items that do not need to be displayed in advance by calculating the attributes

(2) About key in V-for

  • Why usekey:

    • The main purpose is to update the virtual DOM efficiently
    • usekeyTo add one to each element nodeA unique identifier
    • Can be convenientVuebetterThe difference betweenThe components,The Diff algorithmYou canCorrect identificationThis node

    When using V-for to update a rendered element list, the default is in-place reuse

    • When the list data is modified, it will be based onkeyValue to determine whether a value is modified
    • If modified, re-render this item
    • Otherwise, reuse the previous element

  • Try not to use index as key:

    • This is due toindexIt’s always sequential
    • If you insert a piece of data, it will cause subsequent dataindexAll values change
    • This will cause all subsequent data to be re-rendered

I front-end side dish chicken, if there is wrong, please forgive