Vue dynamic components (v-if, v-show, v-for, keep-alive, teleport)

Table of contents

v-if、v-else-if、v-else 存在

keep-alive: keep the state, avoid the component being destroyed and recreated when switching

v-show and display: none display

related basis

BOM（window）

DOM（document）

document flow

rendering process

Dynamic component (component): component name

Send teleport (logic and location are not in the same DOM)

List rendering (v-for): multiple

---

Vue official document

v-if、v-else-if、v-else 存在

function createVNode(type, props, children) {
  // 创建虚拟节点
}

function patch(container, vnode) {
  // 渲染函数，将虚拟节点渲染到真实 DOM 上
}

function processIf(vnode, container) {
  if (vnode.props['v-if']) {                //是否存在 v-if 属性
    if (vnode.props['v-if']()) {
      // 如果满足条件，渲染子节点
      const childVNode = vnode.children[0];
      patch(container, childVNode);
    } else {
      // 如果不满足条件，移除子节点
      container.innerHTML = '';
    }
  }
}

There is a performance overhead when switching , in Vue 3, the performance has been improved , no longer need <template> tag to wrap them

Create , insert into DOM

remove from DOM, destroy

keep-alive: keep the state, avoid the component being destroyed and recreated when switching

insert into the DOM,

remove from DOM

<template>
  <div>
    <button @click="toggleShow">Toggle</button>
    <keep-alive>
      <div v-if="isVisible">This element is kept alive</div>
    </keep-alive>
  </div>
</template>

v-show  and display: none display

el.style.display = value ? originalDisplay : 'none'

Vue.directive('show', {             // directive 方法来定义一个名为 show 的指令
  updated(el, binding) {           // updated 钩子函数
    if (binding.value) {            //恢复原始值
      el.style.display = el.__vOriginalDisplay || '';
    } else {
      if (el.style.display !== 'none') {   //如果元素当前不是 none，则存储为原始值
        el.__vOriginalDisplay = el.style.display;
      }
      el.style.display = 'none';
    }
  }
});

Performance comparison:

v-show : is always rendered and remains in the DOM (even if the component is not displayed on initial render ) ,

Compared with v-if not created if it is not satisfied, the initialization performance of v-show="false" is poor

related basis

BOM（window）

Browser Object Model Browser Object Model

window : alert() , prompt() , confirm() , setInterval() , clearInterval() , setTimeout() , clearTimeout() ;

history : go(parameters) , back() , forward() ;

location : herf attribute.

window.location.href = 'The page you want to jump to';

window.open('The page you want to jump to');

window.history.back(-1): Return to the previous page

window.history.go(-1/1): Return to the previous or next page

window.print() directly use the print window

DOM（document）

Document Object Model  Document Object Model

document flow

The concept of CSS layout, which means that without explicit positioning or floating,

The way elements are arranged from top to bottom in the order of their appearance in the DOM tree,

Document flow determines the position of elements on the page and the relationship between them.

Explicit positioning: absolute, fixed, relative, offset from its normal position or locate to a specific position on the page.

rendering process

1. Load the html and css of the page (source code)
2. html is converted to HTMLDOM (Tree structure), css is converted to CSSOM (Tree structure)
3. Build DOM and CSSOM into Render Tree

( The layout and position of elements are determined based on the rules of the document flow, display:none is moved out of the document flow, so it is not rendered)

1. Reflow (reflow, rearrangement) on the rendering tree (calculate the position of the element)
2. Repaint the web page (repaint)

Dynamic component (component): component name

import A from "./components/A.vue"
import B from "./components/B.vue"
</script>
    <component :is="isShow ? A : B"></component>
</template>

Conditional rendering function (render() )

<template>
  <div>
    <div>
      {renderElement()}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: 'A'
    };
  },
  methods: {
    renderElement() {
      if (this.condition === 'A') {
        return <div>Element A</div>;
      } else if (this.condition === 'B') {
        return <div>Element B</div>;
      } else {
        return <div>Element C</div>;
      }
    }
  }
};
</script>

Teleport teleport ( logic and location are not in the same DOM )

<template>
  <div>
    <button @click="toggleTeleport">Toggle Teleport</button>
    <div>
      <teleport to="body" v-if="isTeleportEnabled">
        <div>This element is teleported to the body</div>
      </teleport>
    </div>
  </div>
</template>

List rendering (v-for) : multiple

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{
   
   { item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

Vue3 [1.v-if and v-show, 2. Dynamic components, 3. Rendering of web pages, 4.v-for]

Built-in Directives | Vue.js