【vue3】07. 跟着官网学习vue3-条件渲染，v-if和v-show

每日鸡汤：命运会眷顾有决断的人

目录

前言

一、v-if和v-show的使用场景

1. 组件需要初始化时

2. 切换不频繁的时候

二、v-show踩坑实例

1. vue3模版多个根结点

2. 解决办法

三、知识延伸

1. 文档片段

2. vue3的渲染机制

总结

---

前言

本篇文章对应学习官网【条件渲染】

重申，学习基本用法，官网是最好的工具。本文仅总结我在项目开发中遇到的问题

---

一、v-if和v-show的使用场景

1. 组件需要初始化时

因为v-if是惰性的，如果你有一个组件，每次展示这个组件都需要执行组件内的某些初始化操作，那么你就用v-if。

因为v-if会导致组件的销毁和重建，你将你需要的初始化操作放在mounted中，每次切换v-if的值都会重新执行。

而v-show使用的是，修改css的display属性值导致的切换，如果你想要在修改v-show的值的时候，执行某些操作，那么你就需要用watch来监听v-show的变化了。

2. 切换不频繁的时候

什么是切换频繁？比如一个loading的状态，你点击一个按钮展示loading，一秒后隐藏loading。这就是比较频繁的操作，loading的展示与否需要用v-show。

切换不频繁的例子：比如在用户已经登录的状态就不展示登录入口，因为用户的登录状态不会频繁变化，这个时候就用v-if。

同样，在一个数据列表中，根据列表数据中的某个type字段来展示内容，也是不频繁切换的例子;

使用v-if在不满足条件的时候，就不会在dom中渲染该元素，会节省不少开销。

二、v-show踩坑实例

1. vue3模版多个根结点

在vue3中单组件文件template模版中已经允许，有多个根结点：

<!-- 组件 hello.vue -->
<template>
    <div>hello</div>
    <div>你好</div>
</template>

 在我们使用v-show操控这种，有多个根结点的组件的时候就会出现问题，这也是我昨天刚遇到的问题。

<!-- 这个时候 v-show 不会生效，hello组件不会隐藏 -->
<hello v-show="false"><hello>

2. 解决办法

（1）修改hello组件，使他只有一个根结点

（2）使用v-if代替，没错，v-if不会有这个问题

三、知识延伸

1. 文档片段

模版中如果有多个根结点，会被包装成文档片段。

DocumentFragment，文档片段接口，表示一个没有父对象的最小文档对象。

它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

2. vue3的渲染机制

可以学习官网，渲染机制部分的知识

包含多个根节点的模板被表示为一个片段 (fragment)

 所以，鉴于，文档片段不是真实dom的一部分，所以vue模版中的多个根结点，是没有父元素的。那么v-show来应用display样式的时候就会出错。

为什么v-if不会出错？很简单，v-if是不渲染，那就是直接略过这个组件就好了。

---

总结

条件渲染这部分，只有两个语法v-show，v-if，时刻牢记一个是css层面的，一个是dom层面的。然后在开发过程中，思考一下是不是频繁切换的组件（用v-show），是不是需要重新初始化（用v-if），基本就可以了。

最后再记住多个根节点的时候不要用v-show，一般就不会踩坑了。