面试题：Vue中条件渲染与列表渲染的常见应用场景

条件渲染（v-if、v-else等）的使用场景

用户权限控制：根据用户的角色或权限来决定是否显示某些特定的组件或元素。例如，只有管理员角色的用户才可以看到系统设置相关的菜单选项。

<template>
  <div>
    <ul>
      <li v-if="user.role === 'admin'">系统设置</li>
      <li>其他通用菜单</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        role: '普通用户'
      }
    }
  }
}
</script>

加载状态判断：在数据加载完成之前显示加载指示器，加载完成后显示实际内容。

<template>
  <div>
    <loading v-if="isLoading"></loading>
    <data - display v - else :data="loadedData"></data - display>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoading: true,
      loadedData: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        this.loadedData = response.data;
        this.isLoading = false;
      } catch (error) {
        console.error('数据加载失败', error);
      }
    }
  }
}
</script>

列表渲染（v-for）的使用场景

展示列表数据：最常见的就是展示数组数据，比如商品列表、用户列表等。

<template>
  <div>
    <ul>
      <li v - for="(product, index) in products" :key="index">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      products: [
        { name: '商品1', price: 100 },
        { name: '商品2', price: 200 }
      ]
    }
  }
}
</script>

动态生成表单元素：根据用户输入的数量或者配置信息，动态生成多个相同类型的表单元素，如输入框。

<template>
  <div>
    <label>输入框数量:</label>
    <input v - model="inputCount" type="number">
    <div v - for="(index) in inputCount" :key="index">
      <input type="text">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputCount: 3
    }
  }
}
</script>

v-if和v-show的区别

渲染方式：
- v-if：是“真正”的条件渲染，它会根据表达式的值在DOM中添加或移除元素。如果初始条件为假，则该元素及其内部的子元素不会被渲染，直到条件变为真时才会渲染。这意味着在条件为假时，相关元素不会存在于DOM树中，也不会占用页面资源。
- v-show：元素始终会被渲染并保留在DOM中，只是通过CSS的display属性来控制元素的显示与隐藏。不管初始条件是真还是假，元素都会在页面加载时被渲染，只是初始条件为假时，display属性会被设置为none，元素不可见。
性能消耗：
- v-if：有较高的切换开销。因为每次条件变化时，元素都需要在DOM中添加或移除，这涉及到重新渲染和更新DOM树的操作，性能开销较大。适用于不频繁切换条件的场景。
- v-show：有较低的初始渲染开销。由于元素始终存在于DOM中，只是通过改变display属性来控制显示，所以初始渲染时性能开销相对较小，但频繁切换时可能会因为display属性的频繁改变而产生一定的性能消耗。适用于需要频繁切换显示状态的场景。

星途面试题库

面试题：Vue中条件渲染与列表渲染的常见应用场景

知识考点

面试题答案

条件渲染（v-if、v-else等）的使用场景

列表渲染（v-for）的使用场景

v-if和v-show的区别