vue指令中v-show和v-if以及keep-alive的区别

v-if：

• 属于条件显示，满足条件就显示元素，不满足就删除元素，通过操作DOM元素完成。
• v-if的首次渲染显示的开销较小，因为它只渲染满足条件的那一个元素，切换组件时；其开销较大，因为它每切换以此就要重新触发生命周期渲染显示新元素
• v-if值为false时，会将该元素节点从DOM树中删除，也就是会删除它的依赖、事件监听等。

v-show：

• 原理是通过控制元素的display属性来决定是否显示元素，属于响应式的。
• 首次渲染的开销较大，因为它会将所有页面全部渲染好之后，在由display属性来决定显示谁。切换开销较小，因为已经全部全然完成，只需要改变display属性便可以显示。

keep-alive：

• 用于缓存活动组件，一开始并不会渲染全部组件，而是会渲染需要显示的组件，当切换组件时，会把之前已经渲染的组件缓存，每一次切换都会缓存该组件。
• 属于按需渲染实现，所以它的切换开销和首次渲染开销都较小。