5.2.2 使用v-show指令进行条件渲染 -TypeScript和Vue从入门到精通(二)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(二)

### 5.2.2 使用`v-show`指令进行条件渲染

在Vue.js框架中，条件渲染是一种根据表达式的真假值来决定是否渲染某个元素或组件的技术。Vue提供了多种指令来实现条件渲染，其中`v-if`、`v-else-if`、`v-else`和`v-show`是最常用的几个。本章节将深入探讨`v-show`指令的使用，理解其工作原理、适用场景以及与`v-if`的区别，帮助读者在TypeScript与Vue结合的项目中更加灵活地运用条件渲染。

#### 5.2.2.1 `v-show`指令基础

`v-show`指令用于根据表达式的真假值来切换元素的CSS属性`display`。当表达式的值为真时，元素会被设置为`display: block`（或其他元素默认的`display`值，如`inline`、`flex`等，取决于元素类型），使其可见；当表达式的值为假时，元素会被设置为`display: none`，使其不可见。

**示例代码**：

```vue
<template>
  <div>
    <button @click="toggleShow">切换显示</button>
    <p v-show="isShown">这段文字会根据isShown的值显示或隐藏。</p>
  </div>
</template>

export default defineComponent({
  setup() {
    const isShown = ref(true);

function toggleShow() {
      isShown.value = !isShown.value;
    }

return {
      isShown,
      toggleShow
    };
  }
});
</script>
```

在这个例子中，我们定义了一个响应式引用`isShown`来控制`<p>`标签的显示与隐藏。点击按钮会调用`toggleShow`方法，该方法会切换`isShown`的值，从而通过`v-show`指令控制`<p>`标签的显示状态。

#### 5.2.2.2 `v-show`与`v-if`的区别

虽然`v-show`和`v-if`都能实现条件渲染，但它们在处理方式和性能上有所不同，了解这些差异有助于我们在不同场景下做出更合适的选择。

- **渲染方式**：`v-if`是“真正的”条件渲染，因为它会确保在条件为假时，对应的元素及其子元素完全不会渲染到DOM中。而`v-show`只是简单地切换元素的CSS属性`display`，元素始终会被渲染到DOM中，只是不可见。

- **性能考虑**：对于频繁切换显示状态的元素，使用`v-show`会比`v-if`有更好的性能，因为`v-show`只是切换CSS属性，而`v-if`涉及到DOM的添加和删除操作，这通常更昂贵。然而，如果元素很少被切换显示状态，或者初始渲染时元素就不应该存在（如基于用户权限的UI元素），则使用`v-if`更为合适。

- **初始渲染**：使用`v-if`时，如果条件为假，则元素及其子元素不会渲染到DOM中，这意味着它们也不会参与初始的DOM布局和渲染过程。而`v-show`的元素无论条件真假，都会参与初始的DOM布局和渲染，只是通过CSS隐藏。

- **CSS和JavaScript的交互**：在某些情况下，你可能希望利用CSS的过渡效果（如淡入淡出）来平滑地显示或隐藏元素。由于`v-show`只是切换`display`属性，它可以很容易地与CSS的过渡和动画结合使用。而`v-if`在元素被添加或删除时，可能无法直接利用CSS的过渡效果，除非结合额外的JavaScript逻辑。

#### 5.2.2.3 `v-show`的高级用法

虽然`v-show`的基本用法相对简单，但在实际项目中，我们可能会遇到一些需要更灵活控制显示逻辑的场景。以下是一些`v-show`的高级用法示例：

- **结合计算属性**：当显示条件较为复杂时，可以使用计算属性来封装这些逻辑，使模板更加简洁。

```vue
  <template>
    <p v-show="isComplexConditionMet">复杂的显示条件</p>
  </template>

export default defineComponent({
    setup() {
      const someData = ref(/* ... */);
      const anotherData = ref(/* ... */);

const isComplexConditionMet = computed(() => {
        // 复杂的逻辑判断
        return someData.value > 10 && anotherData.value < 20;
      });

return {
        isComplexConditionMet
      };
    }
  });
  </script>
  ```

- **在列表渲染中使用**：虽然`v-show`通常用于单个元素的显示控制，但在某些情况下，也可以在`v-for`循环中使用它来根据条件过滤列表中的元素显示。然而，需要注意的是，这并不会从DOM中移除不满足条件的元素，只是使它们不可见。如果列表很长且大部分元素都不需要显示，使用`v-if`结合计算属性来过滤列表可能更为高效。

- **与第三方库结合**：在某些情况下，你可能希望将`v-show`与第三方库（如Vue Router、Vuex等）结合使用，以实现更复杂的显示逻辑。例如，根据Vue Router的路由参数或Vuex的状态来控制元素的显示。

#### 5.2.2.4 注意事项

- **避免滥用**：虽然`v-show`在某些情况下可以提高性能，但过度使用可能会导致DOM结构变得复杂，影响页面的可维护性和性能。因此，应根据实际需求合理选择使用`v-show`还是`v-if`。

- **与CSS类结合**：虽然`v-show`直接操作`display`属性，但在某些情况下，你可能还需要结合CSS类来控制元素的显示样式（如透明度、动画等）。此时，可以考虑使用Vue的`class`和`style`绑定功能来实现。

- **性能优化**：在性能敏感的应用中，应仔细评估`v-show`和`v-if`的使用，确保它们不会成为性能瓶颈。对于频繁切换且对性能要求较高的元素，可以考虑使用`v-show`；而对于不常切换或初始就不应存在的元素，则使用`v-if`更为合适。

通过本章节的学习，你应该已经掌握了`v-show`指令的基本用法、与`v-if`的区别、高级用法以及注意事项。在TypeScript与Vue结合的项目中，灵活运用这些知识点，将帮助你构建出更加高效、可维护的Web应用。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(一)

vuejs组件实例与底层原理精讲

TypeScript和Vue从入门到精通(三)

Vue面试指南

vue项目构建基础入门与实战

Vue.js从入门到精通(三)

VUE组件基础与实战

Vue.js从入门到精通(四)

Vue.js从入门到精通(一)

移动端开发指南

TypeScript和Vue从入门到精通(四)

TypeScript和Vue从入门到精通(五)