面试题：Vue模板中v - for和v - if深度优化及底层原理

Vue底层处理v - for与v - if结合

编译原理：在Vue编译过程中，模板会被解析为抽象语法树（AST）。当遇到v - for和v - if同时存在于一个元素上时，按照Vue的规则，v - for优先级高于v - if。这意味着会先遍历列表进行循环渲染，然后再对每个循环项进行v - if条件判断。
性能瓶颈：
- 重复渲染与销毁：如果v - if的条件频繁变化，那么每个列表项会频繁地被创建和销毁，这涉及到DOM的创建、更新和销毁操作，性能开销较大。
- 不必要的计算：每次v - if条件变化，整个列表都需要重新计算和渲染，即使大部分列表项的v - if条件并没有改变，造成了不必要的性能浪费。

大型列表渲染且频繁根据复杂条件过滤场景的优化方案

分离v - for和v - if：

做法：将v - if移动到v - for的外层容器上，或者使用计算属性过滤列表后再进行v - for渲染。例如：

<template>
  <div>
    <div v - if="filteredList.length">
      <div v - for="item in filteredList" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      filterCondition: ''
    };
  },
  computed: {
    filteredList() {
      // 复杂过滤逻辑
      return this.list.filter(item => {
        // 根据复杂条件过滤
        return item.name.includes(this.filterCondition);
      });
    }
  }
};
</script>

原理：这样做可以在数据层面先对列表进行过滤，只渲染需要展示的部分，避免了对不需要展示的列表项进行不必要的DOM操作，减少了重复渲染和销毁的开销。

使用虚拟滚动：

做法：引入第三方库如vue - virtual - scroll - list。例如：

<template>
  <div>
    <virtual - scroll - list
      :data="filteredList"
      :keyField="id"
      :height="300"
      :item - height="40"
    >
      <template #default="{ item }">
        <div>{{ item.name }}</div>
      </template>
    </virtual - scroll - list>
  </div>
</template>
<script>
import VirtualScrollList from 'vue - virtual - scroll - list';
export default {
  components: {
    VirtualScrollList
  },
  data() {
    return {
      list: [],
      filterCondition: ''
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.includes(this.filterCondition);
      });
    }
  }
};
</script>

原理：虚拟滚动只渲染可见区域内的列表项，当用户滚动时，动态地替换可见区域的列表项，极大地减少了DOM元素的数量，提高了渲染性能，特别适合大型列表场景。

防抖或节流处理过滤条件变化：

做法：使用lodash的debounce或throttle函数。例如：

<template>
  <div>
    <input v - model="filterCondition" @input="debouncedFilter">
    <div v - if="filteredList.length">
      <div v - for="item in filteredList" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
import { debounce } from 'lodash';
export default {
  data() {
    return {
      list: [],
      filterCondition: ''
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.includes(this.filterCondition);
      });
    }
  },
  methods: {
    filterList() {
      // 触发重新计算filteredList
    },
    debouncedFilter: debounce(function () {
      this.filterList();
    }, 300)
  }
};
</script>

原理：防抖可以在过滤条件变化时，延迟一定时间后才执行过滤操作，避免用户快速输入时频繁触发不必要的计算。节流则是限制过滤操作的执行频率，同样可以减少不必要的性能开销。

星途面试题库

面试题：Vue模板中v - for和v - if深度优化及底层原理

知识考点

面试题答案

Vue底层处理v - for与v - if结合

大型列表渲染且频繁根据复杂条件过滤场景的优化方案