vue3个人心得---（操作进阶）组件显示与---KeepAlive缓存

一、组件显示的控制方式

显示的控制方式有两种，分别为属性指令式与动态组件式。

1、属性指令式

通过组件的显示属性或指令来控制组件的显示。

• style="display:none"
• v-show
• v-if/v-if……v-else/v-if……v-else-if……v-else

display与v-show是将显示属性传递给子组件，因此子组件要有一个顶级标签来接收透传（子组件多个顶级标签并列时会出错），v-if无限制。
display与v-show是对渲染后的元素进行显示控制，组件隐藏时组件依然存在（在后台以缓存的形式存在），v-if是重渲染，隐藏后组件不再存在，缓存清除。
style="display:none"为原生属性时，display为非none时元素会显示，当display作为v-bind绑定时，非none并不会使元素显示，需赋系统值才会显示（block、inline、inline-block等才会显示）

2、动态组件式

通过<component/>标签，将组件绑定给is属性的方式将来控制组件的显示。
如：<component :is="组件" />。
当is属性绑定的变量值为组件名时，组件显示。
动态组件式与v-if一样，是对组件重渲染，隐藏后组件不再存在，缓存清除。

二、KeepAlive缓存

当组件使用v-if或动态组件来控制显示时，组件不显会御载组件，清除缓存，组件上所做的一切操作都不会保存。如果要使组件不显示仍然存在，操作依然保留，需将其放入<KeepAlive>标签内。
<KeepAlive>标签内的组件重新显示时，原操作依然保存。