Vue 中 v-show 和 v-if 的区别

编译时刻 vs 运行时刻：

v-if 是一个“惰性”指令，在编译时刻，Vue.js 会根据条件决定是否编译或挂载元素到 DOM 中。如果条件为 false，元素根本不会被编译和渲染到 DOM 中。
v-show 是一个“非惰性”指令，在编译时刻，元素总是会被编译和渲染到 DOM 中。但是，根据条件的值，v-show 会通过 CSS 控制元素的显示和隐藏，不会从 DOM 中移除元素。

显示隐藏方式：

v-if 在条件为 true 时会渲染元素到 DOM，而在条件为 false 时会从 DOM 中移除元素。v-if也可以触发组件创建和销毁的生命钩子。
v-show 在条件为 true 时会通过 CSS 设置元素的 display 属性为可见（通常是 display: block），在条件为 false 时设置为隐藏（display: none）。元素始终存在于 DOM 中，只是通过 CSS 控制其显示状态。

切换开销：

v-if 在条件切换时，如果条件从 true 切换为 false，会销毁并重新创建元素，这涉及到 DOM 的删除和重新插入，可能会有一定的性能开销。
v-show 在条件切换时，只是简单地通过 CSS 控制元素的显示和隐藏，不会销毁和重新创建元素，因此切换的开销较小。

初始渲染开销：

v-if 在初始渲染时，如果条件为 false，元素不会被渲染到 DOM 中，因此在初始渲染时可能会有一定的性能优势。
v-show 在初始渲染时，元素总是会被渲染到 DOM 中，因此在初始渲染时可能会有一些额外的开销。

总结：
当需要频繁切换元素的显示状态时，且元素可能处于不同的状态，推荐使用 v-show。而当条件不会频繁改变，且希望在条件为 false 时不渲染元素到 DOM 中，推荐使用 v-if。在实际使用中，根据具体的场景和性能需求来选择合适的指令。