面试题：Vue中v - for和v - if优先级及性能优化

Question

简述Vue中v - for与v - if的优先级情况，并详细说明在不同场景下（例如列表渲染中根据条件过滤部分元素），如何结合它们使用以达到最佳性能，给出具体代码示例及解释。

Answer 1

v - for与v - if优先级

在Vue中，v - for的优先级高于v - if。这意味着当它们同时存在于同一个元素上时，v - for会首先被解析。这可能导致性能问题，因为v - if每次都需要遍历整个列表来进行条件判断。

不同场景下的使用

1. 列表渲染中根据条件过滤部分元素
   • 错误做法：将v - if和v - for放在同一元素上。

<ul>
  <li v - for="item in items" v - if="item.isVisible" :key="item.id">
    {{ item.name }}
  </li>
</ul>

这样会先遍历整个items列表，然后再对每个元素进行item.isVisible的条件判断，性能较差。

- **正确做法**：在计算属性中过滤数据，然后在`v - for`中使用过滤后的数据。

<ul>
  <li v - for="item in filteredItems" :key="item.id">
    {{ item.name }}
  </li>
</ul>

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isVisible: true },
        { id: 2, name: 'Item 2', isVisible: false },
        { id: 3, name: 'Item 3', isVisible: true }
      ]
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.isVisible);
    }
  }
};

解释：通过计算属性filteredItems对items进行过滤，只保留isVisible为true的元素。然后v - for遍历这个过滤后的列表，这样减少了不必要的渲染，提高了性能。

2. 条件决定是否渲染整个列表
   • 做法：将v - if放在v - for外层元素上。

<div v - if="shouldRenderList">
  <ul>
    <li v - for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

export default {
  data() {
    return {
      shouldRenderList: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  }
};

解释：当shouldRenderList为true时，才会渲染包含v - for的整个列表。这样避免了不必要的列表渲染，提高性能。