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 中，性能得到了改善，不再需要 <template> 标签来包裹它们

创建、插入到 DOM

从DOM移除、销毁

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

插入DOM，

从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 与display: none显示

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

性能比较：

v-show：始终被渲染并保留在 DOM 中（即使初始渲染时组件不显示），

相比v-if没满足就不会创建而言，v-show="false"时初始化性能差

相关基础

BOM（window）

Browser Object Model浏览器对象模型

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

history : go(参数) , back() , foward() ;

location : herf属性.

window.location.href = '你所要跳转到的页面';

window.open('你所要跳转到的页面’);

window.history.back(-1):返回上一页

window.history.go(-1/1):返回上一页或下一页

window.print() 直接掉用打印窗口

DOM（document）

Document Object Model 文档对象模型

文档流

CSS布局概念，它是指在没有进行显式定位或浮动的情况下，

元素按照其在DOM树中的出现顺序从上到下依次排列的方式，

文档流决定了元素在页面中的位置和相互之间的关系，

显式定位：absolute，fixed，relative，对于其正常位置进行偏移或定位到页面的特定位置。

渲染过程

1. 加载页面的html和css（源码）
2. html转换为HTMLDOM（Tree结构），css转换为CSSOM（Tree结构）
3. 将DOM和CSSOM构建成Render Tree

(元素的布局和位置是基于文档流的规则来确定的，display:none被移出文档流，所以不渲染)

1. 对渲染树进行reflow（回流、重排）（计算元素的位置）
2. 对网页进行绘制repaint（重绘）

动态组件 (component)：组件名

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

条件渲染函数 (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（逻辑与位置不是在同一个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>

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

<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 和 v-show 、2.动态组件、 3.网页的渲染 、4.v-for】_十一__一的博客-CSDN博客

Built-in Directives | Vue.js文章来源地址https://uudwc.com/A/LR33x