每日鸡汤：命运会眷顾有决断的人
目录
本篇文章对应学习官网【条件渲染】
重申，学习基本用法，官网是最好的工具。本文仅总结我在项目开发中遇到的问题
因为v-if是惰性的，如果你有一个组件，每次展示这个组件都需要执行组件内的某些初始化操作，那么你就用v-if。
因为v-if会导致组件的销毁和重建，你将你需要的初始化操作放在mounted中，每次切换v-if的值都会重新执行。
而v-show使用的是，修改css的display属性值导致的切换，如果你想要在修改v-show的值的时候，执行某些操作，那么你就需要用watch来监听v-show的变化了。
什么是切换频繁？比如一个loading的状态，你点击一个按钮展示loading，一秒后隐藏loading。这就是比较频繁的操作，loading的展示与否需要用v-show。
切换不频繁的例子：比如在用户已经登录的状态就不展示登录入口，因为用户的登录状态不会频繁变化，这个时候就用v-if。
同样，在一个数据列表中，根据列表数据中的某个type字段来展示内容，也是不频繁切换的例子;
使用v-if在不满足条件的时候，就不会在dom中渲染该元素，会节省不少开销。
在vue3中单组件文件template模版中已经允许，有多个根结点：
- <template>
- <div>hellodiv>
- <div>你好div>
- template>
在我们使用v-show操控这种，有多个根结点的组件的时候就会出现问题，这也是我昨天刚遇到的问题。
- <hello v-show="false"><hello>
（1）修改hello组件，使他只有一个根结点
（2）使用v-if代替，没错，v-if不会有这个问题
模版中如果有多个根结点，会被包装成文档片段。
DocumentFragment，文档片段接口，表示一个没有父对象的最小文档对象。
它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。
可以学习官网，渲染机制部分的知识
包含多个根节点的模板被表示为一个片段 (fragment)
所以，鉴于，文档片段不是真实dom的一部分，所以vue模版中的多个根结点，是没有父元素的。那么v-show来应用display样式的时候就会出错。
为什么v-if不会出错？很简单，v-if是不渲染，那就是直接略过这个组件就好了。
条件渲染这部分，只有两个语法v-show，v-if，时刻牢记一个是css层面的，一个是dom层面的。然后在开发过程中，思考一下是不是频繁切换的组件（用v-show），是不是需要重新初始化（用v-if），基本就可以了。
最后再记住多个根节点的时候不要用v-show，一般就不会踩坑了。