vue动态组件

目录

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

keep-alive：保留状态，避免组件在切换时被销毁和重新创建

v-show 与display: none显示

相关基础

BOM（window）

DOM（document）

文档流

渲染过程

动态组件 (component)：组件名

传送teleport（逻辑与位置不是在同一个DOM）

列表渲染 (v-for)：多个

---

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

切换时有性能开销，在 Vue 3 中，性能得到了改善，不再需要

条件渲染函数 (render() )

传送teleport（逻辑与位置不是在同一个DOM）

列表渲染 (v-for)：多个

Vue3【1.v-if 和 v-show 、2.动态组件、 3.网页的渲染 、4.v-for】_十一__一的博客-CSDN博客

Built-in Directives | Vue.js