关于v-if和v-show的使用场景及区别

Question

这个面试被问得很多，我还是有点不明白，只知道v-if用于显示隐藏组件次数不频繁，v-show则用于频繁显示隐藏组件 像这里的v-if=“seller.supports”，不同的用户可能有这个，也可能没这个，然后有很多用户，我认为这不是是频繁显示隐藏了吗，这个频繁的我界定我摸不透啊，像那个登录页面，没登录就显示那个登录按钮，登录了就显示用户名这个也是用的v-if 我尝试这里用v-show会报错

Answer 1

ustbhuangyi 2020-03-21 10:43:46

v-if 的节点当条件不满足，子节点都不会渲染，如果子节点包含组件，组件也不会渲染；而 v-show 的节点其实都已经渲染了，只是样式上通过 display:none 隐藏了，所以从首次渲染来说，v-if 的性能要好。
而对于频繁切换显隐的场景，比如某个组件会根据用户的操作频繁的显示或者隐藏，如果用 v-if 就会经历组件的卸载和挂载的生命周期，而 v-show 也只是改 display，所以这种场景 v-show 性能要好。
至于用什么，首先需要你对这俩指令深度了解，其次就是根据经验做选择了，有些场景下 2 者差别不大。