Vue中v-if与v-for的性能差异与最佳实践

1. 为什么Vue不建议同时使用v-if和v-for？

这个问题看似简单，但背后涉及到Vue的编译机制、渲染性能优化和代码设计原则。作为从Vue 1.x用到3.x的老手，我见过太多开发者在这个问题上栽跟头。今天我们就来彻底剖析这个"经典面试题"。

1.1 优先级差异：Vue 2 vs Vue 3的核心区别

在Vue 2中，v-for的优先级高于v-if。这意味着模板编译器会先处理循环，再处理条件判断。来看个实际例子：

html复制<!-- Vue 2编译结果 -->
<ul>
  <li v-for="item in items" v-if="item.active">
    {{ item.name }}
  </li>
</ul>

实际上会被编译成类似这样的渲染函数：

javascript复制function render() {
  return _c('ul', 
    _l(items, function(item) {
      return item.active 
        ? _c('li', [_v(_s(item.name))]) 
        : _e()
    }), 0)
}

可以看到，即使item.active为false，循环依然会执行，只是返回空节点。这种设计在Vue 2早期是为了保持行为一致性，但却带来了性能隐患。

而在Vue 3中，这个优先级被反转了 - v-if现在有更高的优先级。同样的代码在Vue 3中：

html复制<!-- Vue 3编译结果 -->
<ul>
  <template v-for="item in items">
    <li v-if="item.active">
      {{ item.name }}
    </li>
  </template>
</ul>

会被编译为：

javascript复制function render() {
  return _openBlock(), _createBlock('ul', null, 
    _l(items, item => {
      return item.active
        ? (_openBlock(), _createBlock('li', { key: item.id }, _toDisplayString(item.name), 1))
        : _createCommentVNode("v-if", true)
    }), 128 /* KEYED_FRAGMENT */)
}

虽然Vue 3的编译结果看起来更复杂，但关键区别在于：现在v-if的判断发生在v-for的循环体内部，这意味着我们可以利用Vue 3的块树优化（Block Tree）来跳过不必要的更新。

关键提示：Vue 3的这种改变不是随意为之，而是为了配合其新的响应式系统和编译优化策略。在静态分析阶段，编译器能更好地识别哪些节点是条件性的。

1.2 性能陷阱：为什么这种用法会成为瓶颈

让我们用数据说话。假设我们有一个包含1000项的列表，其中只有10项满足v-if条件：

javascript复制const items = Array(1000).fill().map((_, i) => ({
  id: i,
  name: `Item ${i}`,
  active: i % 100 === 0  // 只有10项是active的
}))

在Vue 2的实现中：

1. 每次渲染都会遍历全部1000项
2. 为每个项创建VNode（虚拟DOM节点）
3. 然后对990个不满足条件的VNode执行空操作

即使最终只渲染10个节点，但虚拟DOM的创建和比对开销是1000次。这就像你让1000个人排队，只是为了挑选其中的10个合格者 - 效率极低。

在Vue 3中情况稍好，得益于其静态提升和块树优化，但依然存在不必要的循环开销。更合理的做法是预先过滤数据：

javascript复制const activeItems = computed(() => items.filter(item => item.active))

然后在模板中直接使用过滤后的结果：

html复制<li v-for="item in activeItems">
  {{ item.name }}
</li>

这种方式的优势在于：

1. 只在响应式数据变化时执行一次过滤
2. 渲染循环只处理实际需要显示的项
3. 更符合声明式编程的思想 - "告诉我你想要什么，而不是如何做"

1.3 可维护性考量：代码即设计

从工程角度，同时使用v-if和v-for往往暗示着设计问题。来看几个常见的不良模式：

反模式1：在模板中进行数据过滤

html复制<!-- 不好的实践 -->
<div v-for="user in users" v-if="user.isAdmin && user.isActive">
  {{ user.name }}
</div>

这种写法将业务逻辑混入视图层，导致：

1. 过滤条件难以复用
2. 难以添加单元测试
3. 条件变更时需要修改模板

反模式2：嵌套条件导致复杂度爆炸

html复制<!-- 复杂度失控的典型 -->
<div 
  v-for="item in items"
  v-if="checkPermission(item)