关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题

前言

在 Vue 和 uni-app 的使用过程中，我们常使用到 v-show 与 v-if 。但很多人在用时并不知道两者到底有什么区别，下面就由我来介绍下吧

---

一、v-show

v-show 是一个根据条件展示元素选项的指令 ：

<view v-show="true">Hello!</view>

v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到 DOM 中。之后切换的时候，通过简单地切换元素的 CSS 属性的 display 来显示或隐藏元素。可以说只是改变 css 的样式，几乎不会影响什么性能。

二、v-if

v-if 指令用于条件性地渲染一块内容：

<view v-if="true">Hello!</view>

在首次渲染的时候，如果条件为假，便不会渲染到 DOM中，且页面当中也不会有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

三、两者区别

• v-if：的false隐藏，默认是把所在的view给删除，有更高的切换开销
• v-show：则是直接更改样式，display: block / none，有更高的初始渲染开销

所以对于频繁进行切换状态，选择 v-show 性能更好；运行条件很少改变，选择 v-if 性能更好。

关于在uni-app小程序中v-show指令失效问题有两种解决方法：

代码如下（示例）：

<!-- 1.用 v-if 来代替此功能 -->
<view v-if="true">Hello!</view>
<!-- 2.通过 :style 的方式也能达到一样的效果 -->
<view :style="!show ? '' : 'display:none;'">Hello!</view>