vue源码解析——v-if和v-for哪个优先级高，如何避免两者同时使用

 vue2测试

<template>
  <div>
    <li v-for="item in arr" :key="item" v-if="exists"></li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4],
      exists: false,
    };
  },
};
</script>

<style></style>

vue2模板编译

v-if和v-for同时存在

function render() {
  with(this) {
    return _c('div', _l((arr), function (item) {
      return (exists) ? _c('li', {
        key: item
      }) : _e()
    }), 0)
  }
}

v-if引用了v-for遍历的item内容

<div>
    <li v-for="item in arr" :key="item" v-if="item % 2">item</li>
  </div>

function render() {
  with(this) {
    return _c('div', _l((arr), function (item) {
      return (item % 2) ? _c('li', {
        key: item
      }, [_v("item")]) : _e()
    }), 0)
  }
}

vue3测试

v-if引用了v-for遍历的item内容

<template>
  <div>
    <li v-for="item in arr" :key="item" v-if="item % 2">item</li>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const exists = ref(false);
let arr = ref([1, 2, 3, 4]);
</script>

vue3模板编译

import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, [
    (_ctx.item % 2)
      ? (_openBlock(true), _createElementBlock(_Fragment, { key: 0 }, _renderList(_ctx.arr, (item) => {
          return (_openBlock(), _createElementBlock("li", { key: item }, "item"))
        }), 128 /* KEYED_FRAGMENT */))
      : _createCommentVNode("v-if", true)
  ]))
}

vue2源码分析

genElement函数

genFor\genIf函数

 

vue3

 createIfBranch函数

vue2 VS vue3

当v-if和v-for同时作用在同一个元素上，并且v-if使用了v-for的遍历结果时，两个版本的处理方式有所不同：

 如何避免同时使用v-if和v-for

为了避免同时使用v-if和v-for，可以考虑以下几种方法：

1. 使用计算属性或方法：将需要根据条件筛选的数据在组件中提前处理好，然后在模板中只使用v-for进行循环展示。
2. 使用过滤器：通过过滤器对数据进行筛选，然后在模板中只使用v-for进行循环展示。
3. 使用嵌套元素：将需要条件判断的元素放置在另一个包裹元素内，然后在外层元素上使用v-for，在内层元素上使用v-if。目的就是让v-if和v-for分开