vue中的slot和v-show和v-if有什么区别？可以互相替代吗？

Question

vue中的slot和v-show和v-if有什么区别？可以互相替代吗？

Answer 1

v-if 表示这个节点可能不存在，v-show 表示这个节点可能不显示，当然不能互相替代。

Answer 2

我理解 slot 和 v-if 虽然有时候可以实现类似的功能，但这两个在组件设计上的理念上是完全不一样的。

• v-if 和 v-show 是把显示内容的判断放在组件内部，也就是不管这个内容是否显示，这部分代码和逻辑判断都在组件里面存在。这种适合组件内部逻辑状态使用，比如按钮是否显示之类的。
• 而 slot 是把显示的内容以及显示与否交给了父级组件，更适合一些通用组件使用，比如弹窗之类的。这样组件就可以与业务解耦，业务部分的内容可以父级通过 slot 传递进来。

虽然用 v-if 和 v-show 理论上也能实现一个弹窗组件，无非就是在弹窗增加场景时在内部不断增加判断，但这样的话这个组件就与业务耦合太严重，而且很难维护。

Answer 3

不能互相替代，但是可能在视觉上你觉得是一样的效果。
v-show是使用css的display属性来打到切换一个元素显示的效果，v-if是控制dom节点是否在html文档上来达到该效果的。
理论上来说，如果一个元素频繁切换显示，最好使用v-show。
v-if可以让你严格根据某些数据来控制页面上节点的渲染，比如根据某个类型来渲染某个组件（你不可能需要全部组件的创建以及他们的切换）

Answer 4

v-if是控制dom节点，v-show是通过display：none来控制显示与否，在dom树上依然存在。
至于slot和上面两者的区别就大了去了，比如你在A组件里有一个slot插槽，你在这个插槽里放B组件，放C组件，放D组件，可以不放组件，显然这是v-if 、v-show做不到的（除非写一大串的条件）。
建议你仔细阅读官方文档，你提出的问题，文档里其实都有说明。

Answer 5

不可以相互替代。

v-show是dom元素已经渲染出来了，只是有没有展示出来，v-if是能控制dom元素是否渲染。
v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
v-if适合运行时条件很少改变时使用。v-show适合频繁切换。