v-if与v-for的优先级之谜：哪个先渲染？

在Vue.js的开发过程中，v-if和v-for是开发者经常使用的两个重要指令。v-if用于条件渲染，而v-for则用于列表渲染。然而，当这两个指令同时出现在同一个标签节点上时，它们的执行顺序却常常让开发者感到困惑。本文将深入探讨v-if和v-for在同一标签节点上的优先级问题，并通过具体例子进行说明。

一、理解v-if与v-for

v-if：Vue的条件渲染指令，它根据表达式的真假值来决定是否渲染该元素。只有当条件为真时，元素才会被渲染到DOM中。
v-for：Vue的列表渲染指令，它基于一个数组来渲染一个列表。使用item in items的语法，其中items是源数据数组，item是数组元素的别名。

二、v-if与v-for的优先级

在Vue.js中，当v-if和v-for同时出现在同一个标签上时，v-for的优先级高于v-if。这意味着Vue会首先进行列表渲染（即执行v-for），然后再对每个列表项进行条件判断（即执行v-if）。

三、具体例子

假设我们有一个Vue组件，需要渲染一个商品列表，但只想显示那些库存量大于0的商品。我们可以使用v-for来遍历商品数组，并使用v-if来过滤库存量。然而，如果直接将v-if和v-for放在同一个标签上，可能会导致性能问题，因为Vue会先渲染所有商品，然后再进行条件判断。

错误的做法

<div id="app">
  <ul>
    <li v-for="product in products" v-if="product.stock > 0">{{ product.name }} - 库存: {{ product.stock }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    products: [
      { name: '苹果', stock: 0 },
      { name: '香蕉', stock: 5 },
      { name: '橙子', stock: 0 },
    ]
  }
});
</script>

在这个例子中，Vue会先遍历products数组，为每个商品创建一个<li>元素，然后再判断stock是否大于0。如果stock不大于0，则该<li>元素不会被渲染到DOM中，但这已经造成了不必要的DOM操作。

正确的做法

为了避免这种性能浪费，我们应该将v-if放在外层模板或元素上，或者使用计算属性来过滤列表。

使用模板标签

<div id="app">
  <ul>
    <template v-if="filteredProducts.length">
      <li v-for="product in filteredProducts">{{ product.name }} - 库存: {{ product.stock }}</li>
    </template>
    <li v-else>没有库存的商品。</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    products: [
      { name: '苹果', stock: 0 },
      { name: '香蕉', stock: 5 },
      { name: '橙子', stock: 0 },
    ]
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => product.stock > 0);
    }
  }
});
</script>

在这个例子中，我们使用了一个计算属性filteredProducts来过滤出库存量大于0的商品，并将v-if放在外层<template>标签上。这样，Vue就只会渲染那些满足条件的商品，避免了不必要的DOM操作。

四、总结

在Vue.js中，当v-if和v-for同时出现在同一个标签上时，v-for的优先级高于v-if。这意味着Vue会先执行列表渲染，再对每个列表项进行条件判断。为了避免性能浪费，我们应该尽量避免将v-if和v-for直接放在同一个标签上，而是通过嵌套使用模板标签或使用计算属性来过滤列表。这样不仅可以提高应用的性能，还可以使代码更加清晰和易于维护。