v-if和v-show的用法

相同点

　　v-if 和 v-show 都可以动态控制 dom 元素显示隐藏；

不同点

　　v-if 显示隐藏是将 dom 元素整个添加或删除（频繁操作dom对性能影响很大）；

　　v-show 隐藏是为该元素添加 display：none，dom 元素还存在；

性能消耗

　　v-if 有更高的切换消耗；

　　v-show 有更高的初始渲染消耗；

使用场景

　　当组件中某块内容只会显示或隐藏不会再次改变显示状态，此时用 v-if 更加合适，例如请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改；

　　当组件某块内容显示隐藏是可变化的，此时用 v-show 更加合理，例如页面中有一个按钮，点击按钮来控制某块区域的显示隐藏；

编译条件

　　v-if 是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候局部卸载）；

　　v-show 是在任何条件下都被编译，然后被缓存，而且 dom 元素保留；

注意

　　当一个元素默认在css中加了 display：none属性，这时通过 v-if 或者 v-show 修改为 true 是无法让元素显示的。因为动态控制显示隐藏，只是修改 display：none 或者display：" "，并不会覆盖或者修改已经存在的css属性~