v-for 和 v-if

比较

• v-for 比 v-if 优先执行，如果一起用会造成性能浪费，可 v-for 外嵌套 v-if 使用。
• 如果 v-for 内嵌套 v-if ，可先用计算属性 computed 过滤遍历数组再 v-for ，优化性能。

<template>
  <div>
    <p v-for="item in items" :key="item.id" v-if="isHide">{{ item.name }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isHide: true,
      items: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
      ],
    };
  },
  created() {
    console.log(this.$options.render);
  },
};
</script>

/**
_l() 列表渲染函数
isHide 在 _l() 函数内部，优先遍历 items，v-for 比 v-if 优先执行

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    _vm._l(_vm.items, function(item) {
      return _vm.isHide
        ? _c("p", { key: item.id }, [_vm._v(_vm._s(item.name))])
        : _vm._e()
    }),
    0
  )
}
*/

• v-for 外嵌套 v-if

<template>
  <div>
    <template v-if="isHide">
      <p v-for="item in items" :key="item.id" >{{ item.name }}</p>
    </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isHide: true,
      items: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
      ],
    };
  },
  created() {
    console.log(this.$options.render);
  },
};
</script>

/**
先判断 isHide，条件满足再执行 _l() 函数

var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(
    "div",
    [
      _vm.isHide
        ? _vm._l(_vm.items, function(item) {
            return _c("p", { key: item.id }, [_vm._v(_vm._s(item.name))])
          })
        : _vm._e()
    ],
    2
  )
}
*/

• v-for 内嵌套 v-if

<template>
  <div>
    <!-- 方法一 -->
    <!-- <p v-for="item in items" :key="item.id">
      <span v-if="item.check">{{ item.name }}</span>
    </p> -->

    <!-- 方法二（推荐） -->
    <p v-for="item in newItems" :key="item.id">
      <span>{{ item.name }}</span>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "张三", check: false },
        { id: 2, name: "李四", check: true },
      ],
    };
  },
  computed: {
    newItems() {
      let items = this.items.filter((item) => {
        return item.check;
      });
      return items;
    },
  },
  created() {
    // console.log(this.newItems);
    console.log(this.$options.render);
  },
};
</script>