v-if和v-show的区别

v-if与v-show区别

v-if和v-show都能控制元素在页面是否显示，但它们的工作机制和适用场景有所不同。

v-if

当v-if的值为false时，Vue不会渲染该元素到DOM中；只有当其值变为true时，才会真正地创建并插入DOM。因此，v-if在切换频繁的情况下开销较大，因为它涉及到DOM的添加或移除。但是，对于那些初始渲染时不需要展示或者很少切换显示状态的元素来说，使用v-if更为合适。

<h1 v-if="isShow">内容</h1>

v-show

v-show只是简单地通过CSS的display属性来控制元素的显示或隐藏。无论v-show的条件是真还是假，元素总是会被渲染到DOM中，并且只是简单地切换样式。这意味着v-show更适合于那些需要频繁切换显示/隐藏状态的场景，因为它的开销主要在于CSS样式的更改，而不是DOM的操作。

<h1 v-show="isShow">内容</h1>

总结

总结来说，如果你需要根据条件判断是否渲染某个元素，尤其是当这个条件很少变化时，推荐使用v-if。而如果元素需要频繁地显示或隐藏，则应该考虑使用v-show。选择合适的指令可以提高应用的性能和响应速度。

v-for和v-if的优先级（vue3）

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。

<template>
  <div>
    <template v-for="item in List" v-if="isShow">
      <li v-if="item.isShow">
        {{ item.label }}
      </li>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
const isShow = ref(false);
const List = ref([
  { label: "1", isShow: false },
  { label: "2", isShow: true },
  { label: "3", isShow: true },
]);
</script>

如下编码时就会抛出一个错误，这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名

<template>
  <div>
    <li v-for="item in List" v-if="item.isShow">
      {{ item.label }}
    </li>
  </div>
</template>

<script setup>
import { ref } from "vue";
const List = ref([
  { label: "1", isShow: false },
  { label: "2", isShow: true },
  { label: "3", isShow: true},
]);
</script>

我们可以这样写

<template>
  <div>
    <template v-for="item in List">
      <li v-if="item.isShow">
        {{ item.label }}
      </li>
    </template>
  </div>
</template>

<script setup>
import { ref } from "vue";
const List = ref([
  { label: "1", isShow: false },
  { label: "2", isShow: true },
  { label: "3", isShow: true },
]);
</script>