Componentes dinámicos de Vue (v-if, v-show, v-for, keep-alive, teleport)

Tabla de contenido

v-if,v-else-if,v-else 存在

keep-alive: mantiene el estado, evita que el componente sea destruido y recreado al cambiar

v-show y pantalla: ninguna pantalla

base relacionada

lista de materiales (ventana)

DOM (documento)

flujo de documentos

proceso de renderizado

Componente dinámico (componente): nombre del componente

Enviar teletransporte (la lógica y la ubicación no están en el mismo DOM)

Representación de lista (v-for): múltiple

---

Documento oficial de Vue

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 = '';
    }
  }
}

Hay una sobrecarga de rendimiento al cambiar , en Vue 3, el rendimiento ha mejorado , ya no necesita la etiqueta <template> para envolverlos

Crear , insertar en DOM

eliminar de DOM, destruir

keep-alive: mantiene el estado, evita que el componente sea destruido y recreado al cambiar

insertar en el DOM,

eliminar de 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  y pantalla: ninguna pantalla

el .style.display  =  valor  ?  pantalla original  :  'ninguno'

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';
    }
  }
});

Comparación de rendimiento:

v-show : siempre se renderiza y permanece en el DOM (incluso si el componente no se muestra en el renderizado inicial ) ,

En comparación con v-si no se crea si no se satisface, el rendimiento de inicialización de v-show="false" es deficiente

base relacionada

lista de materiales (ventana)

Modelo de objetos del navegador Modelo de objetos del navegador

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

historial: ir (parámetros), atrás (), adelante ();

ubicación: atributo herf.

window.location.href = 'La página a la que desea saltar';

window.open('La página a la que desea saltar');

window.history.back(-1): Volver a la página anterior

window.history.go(-1/1): Volver a la página anterior o siguiente

window.print() usa directamente la ventana de impresión

DOM (documento)

Modelo  de objeto de documento Modelo de objeto de documento

flujo de documentos

El concepto de diseño CSS, lo que significa que sin posicionamiento explícito o flotante,

La forma en que los elementos se organizan de arriba a abajo en el orden de aparición en el árbol DOM,

El flujo de documentos determina la posición de los elementos en la página y la relación entre ellos.

Posicionamiento explícito: absoluto, fijo, relativo, desplazado de su posición normal o ubicarse en una posición específica en la página.

proceso de renderizado

1. Cargue el html y css de la página (código fuente)
2. html se convierte a HTMLDOM (estructura de árbol), css se convierte a CSSOM (estructura de árbol)
3. Cree DOM y CSSOM en Render Tree

( El diseño y la posición de los elementos se determinan según las reglas del flujo del documento, display:none se mueve fuera del flujo del documento, por lo que no se procesa)

1. Reflujo (reflujo, reorganización) en el árbol de representación (calcular la posición del elemento)
2. Repintar la página web (repintar)

Componente dinámico (componente): nombre del componente

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

Función de representación condicional (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>

Teletransporte teletransporte ( la lógica y la ubicación no están en el mismo 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>

Representación de lista (v-for) : múltiple

<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 y v-show, 2. Componentes dinámicos, 3. Representación de páginas web, 4.v-for]

Directivas integradas | Vue.js