v-if 和 v-show：两种 Vue 条件渲染比较分析

在Vue中，有两种方法可以有条件地渲染部分应用程序：v-if
和v-show
。

你可能会问，“为什么我们需要两种方法？”

问得好，这也是我在学习Vue时遇到的一个问题。我的答案是，尽管这些指令有着相似的最终结果，但它们有条件地显示内容的方式是不同的。

在本教程中，我们将了解什么是条件渲染、v-if
和v-show
的工作原理以及何时使用它们。

好的，话不多说，直接进入主题吧。

什么是条件渲染？

条件渲染是控制是否渲染模板代码的能力。我们可以通过应用程序的当前状态来做到这一点。

来看一个例子。假设我们正在创建一个表单，并且希望如果密码少于6个字符，则显示无效输入的错误消息。

现在让我们在模板中创建一个带有输入的基本表单区域。脚本使用v-model
建模表单数据。

基本表单

<template>
  <div>
    <h2>Sign Up</h2>
    {{ email }} {{ password }}
    <p><input type="text" placeholder="Email" v-model="email" /></p>
    <p><input type="password" placeholder="Password" v-model="password" /></p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        email: "",
        password: "",
      };
    },
  };
</script>

接着，让我们在密码字段下添加一个带有error-message
类的<p>
元素。

<template>
  <div>
    <h2>Sign Up</h2>
    {{ email }} {{ password }}
    <p><input type="text" placeholder="Email" v-model="email" /></p>
    <p><input type="password" placeholder="Password" v-model="password" /></p>
    <p class="error-message">The password must be at least 6 characters</p>
  </div>
</template>

好的，现在如果我们运行Vue应用程序，可以在浏览器中看到类似这样的内容。

现在我们可以在密码长度小于6个字符时使用条件渲染显示此错误消息。

还是这个例子，这次我们使用v-if
指令，因此在<p>
标签上，我们可以只用v-if
然后传入一个布尔语句。如果此语句为真，则渲染元素。如果为假，则不渲染。非常简单易懂。

使用v-if

<p class="error-message" v-if="password.length < 6">
      The password must be at least 6 characters
</p>

OK！正确渲染了错误信息！

回到代码，现在将v-if
改为v-show
，并且希望应用程序看起来完全相同。

使用v-show

<p class="error-message" v-show="password.length < 6">
      The password must be at least 6 characters
</p>

然而，v-if
和v-show
的工作方式不同。

那么，v-if和v-show有什么区别？

关键区别在于v-if
有条件地渲染元素，而v-show
有条件地显示元素。

这意味着当条件切换时，v-if
实际上将销毁并重新创建元素。而v-show
则始终保留元素在DOM中，并且只会通过更改CSS来切换显示。

我们可以通过为v-if
和v-show
运行检查元素来轻松查看这些区别。例如，假设有以下代码，其中包含两种类型的条件和一个切换条件的按钮。

<template>
  <div>
    <p v-if="active">Using v-if</p>
    <p v-show="active">Using v-show</p>
    <button @click="active = !active">Toggle active</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active: false,
      };
    },
  };
</script>

当显示元素时，DOM看起来像这样。

当我们按下按钮时，DOM看起来像这样。

如你所见，使用v-if
的话，条件块完全从DOM中删除。但是使用v-show
，其display
设置为none
。

瞧！这就是v-if
和v-show
之间的区别。

什么时候使用？

一般情况下，考虑性能，v-if
具有更高的切换成本，而v-show
具有更高的初始渲染成本。

所以，如果你需要频繁切换某些内容，建议使用v-show
。

如果条件在运行时变化不那么频繁，建议使用v-if
。

另一件要考虑的事情是，v-if
允许我们结合使用其他逻辑块。具体地说就是，我们可以使用v-else
和v-else-if
块在app中真正构建高级逻辑。

使用v-else
和v-else-if

<p v-if="active">Using v-if</p>
<p v-else-if="true">Else if statement</p>
<p v-else>Else statement</p>

明白了吗？这两种方法适用于不同的场合。100%取决于用例，所以一定要慎重考虑而不是随便选一个！！

结束语

希望这篇简短的文章能帮助大家了解v-if
和v-show
指令工作方式之间的区别。

感谢阅读！