5.2 条件渲染 -TypeScript和Vue从入门到精通(二)

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

### 5.2 条件渲染

在Vue.js中，条件渲染是一种根据表达式的真假值来决定是否渲染某个元素或组件的技术。这种能力使得Vue应用能够动态地展示内容，提高用户体验和应用的灵活性。当结合TypeScript使用时，条件渲染不仅能保持Vue的简洁性，还能通过TypeScript的强类型特性减少运行时错误，提升代码的可维护性。本章将深入探讨Vue与TypeScript结合下的条件渲染技术，包括基本的条件渲染指令（如`v-if`、`v-else-if`、`v-else`）、`v-show`的使用，以及高级技巧如列表渲染中的条件逻辑、计算属性与侦听器在条件渲染中的应用。

#### 5.2.1 基本条件渲染指令

##### 5.2.1.1 v-if

`v-if`是Vue中最常用的条件渲染指令之一。它根据表达式的真假值来条件性地渲染元素。如果表达式的值为真（truthy），则渲染该元素及其内容；如果为假（falsy），则不渲染该元素及其内容。与JavaScript中的逻辑判断类似，Vue中的falsy值包括`false`、`0`、`""`（空字符串）、`null`、`undefined`、`NaN`。

在TypeScript与Vue结合的项目中，使用`v-if`时，你可以直接利用TypeScript的类型检查能力来确保表达式的正确性。例如：

```vue
<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，{{ userName }}!</p>
    <p v-else>请先登录</p>
  </div>
</template>

export default defineComponent({
  name: 'ConditionalRendering',
  setup() {
    const isLoggedIn = ref(false);
    const userName = ref('');

// 假设这里有一些逻辑来改变isLoggedIn和userName的值

return { isLoggedIn, userName };
  }
});
</script>
```

在这个例子中，`isLoggedIn`是一个响应式引用（通过`ref`创建），用于控制登录状态的显示。TypeScript确保了`isLoggedIn`和`userName`的类型正确，减少了因类型错误导致的bug。

##### 5.2.1.2 v-else-if 与 v-else

`v-else-if`和`v-else`可以看作是`v-if`的补充，它们允许你在一个模板中基于多个条件来渲染不同的内容。`v-else-if`后面必须跟着一个条件表达式，而`v-else`则不需要，它会捕获前面所有`v-if`和`v-else-if`条件都不满足的情况。

```vue
<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

export default defineComponent({
  name: 'GradeDisplay',
  setup() {
    const score = ref(75);
    return { score };
  }
});
</script>
```

在这个例子中，`score`的值决定了显示哪个段落。TypeScript保证了`score`是一个数字类型，这对于条件判断至关重要。

#### 5.2.2 v-show

虽然`v-if`是实现条件渲染的常用方式，但Vue还提供了`v-show`指令作为另一种选择。与`v-if`不同的是，`v-show`无论条件真假都会渲染元素，只是通过改变CSS的`display`属性来控制元素的显示与隐藏（当条件为假时，设置`display: none`）。

```vue
<template>
  <div>
    <p v-show="isVisible">这条消息根据条件显示或隐藏</p>
  </div>
</template>

export default defineComponent({
  name: 'ShowHideMessage',
  setup() {
    const isVisible = ref(true);

// 可以在这里添加逻辑来改变isVisible的值

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

与`v-if`相比，`v-show`的切换成本较低，因为它只是简单地切换CSS属性，而不是销毁和重新创建元素。然而，对于初始时不需要渲染的元素，使用`v-if`会更合适，因为它可以避免不必要的DOM操作。

#### 5.2.3 高级应用

##### 5.2.3.1 在列表渲染中应用条件逻辑

当在Vue中渲染列表时，你可能需要基于列表项的属性来决定是否渲染某个元素。这可以通过结合`v-for`和`v-if`（或`v-show`）来实现。但需要注意的是，直接在`v-for`元素上使用`v-if`可能会导致性能问题，因为Vue会先渲染整个列表，然后再过滤掉不满足条件的元素。更高效的做法是在计算属性或方法中预先过滤列表。

```vue
<template>
  <ul>
    <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

interface Item {
  id: number;
  name: string;
  isVisible: boolean;
}

export default defineComponent({
  name: 'FilteredList',
  setup() {
    const items = ref<Item[]>([
      { id: 1, name: 'Apple', isVisible: true },
      { id: 2, name: 'Banana', isVisible: false },
      // 更多项...
    ]);

const filteredList = computed(() => {
      return items.value.filter(item => item.isVisible);
    });

return { items, filteredList };
  }
});
</script>
```

##### 5.2.3.2 计算属性与侦听器

在计算属性（Computed Properties）和侦听器（Watchers）中也可以实现复杂的条件逻辑，以响应式地更新DOM。计算属性基于其依赖的响应式引用进行计算，并返回新的值，这个值会被缓存起来，直到依赖的引用发生变化。侦听器则允许你执行异步操作或昂贵的操作，以响应数据的变化。

在条件渲染的场景中，你可以使用计算属性来动态地决定是否渲染某个元素或组件，或者根据条件返回不同的模板字符串。侦听器则可以在数据变化时执行一些副作用，比如调用API获取新数据，然后基于这些数据更新UI。

```vue
<template>
  <div>
    <p v-if="isSpecialDay">今天是特殊的日子！</p>
  </div>
</template>

export default defineComponent({
  name: 'SpecialDayDisplay',
  setup() {
    const today = ref(new Date());
    const specialDays = ['2023-02-14', '2023-12-25']; // 示例特殊日期

const isSpecialDay = computed(() => {
      const formattedToday = today.value.toISOString().split('T')[0];
      return specialDays.includes(formattedToday);
    });

// 假设这里有一个侦听器来监听today的变化，但实际上在这个例子中不需要

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

在这个例子中，`isSpecialDay`是一个计算属性，它根据当前日期和预定义的特殊日期数组来判断今天是否是特殊的日子。由于计算属性是基于其依赖的响应式引用（在这里是`today`）进行计算的，因此当`today`变化时，`isSpecialDay`也会自动更新，从而触发条件渲染的重新评估。

### 结语

条件渲染是Vue.js中非常重要的一部分，它使得开发者能够基于数据的真假值来动态地控制DOM的显示与隐藏。当与TypeScript结合使用时，条件渲染不仅能够保持Vue的简洁性和灵活性，还能通过TypeScript的强类型特性来提高代码的质量和可维护性。通过掌握`v-if`、`v-else-if`、`v-else`、`v-show`等基本指令，以及它们在列表渲染、计算属性、侦听器中的高级应用，你可以构建出更加动态和响应式的Vue应用。

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

Vue面试指南

Vue原理与源码解析

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

移动端开发指南

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

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

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

Vue3技术解密

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

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

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

VUE组件基础与实战