后续源码分析都是依据 "version": "2.7.16" （vue2版本【最新版本】）和 "version": "3.5.12"【当前最新版本】 （vue3版本）分析的对比

问题发生

一般指的是 v-for 和 v-if 连用的情况

结论

v-if 和 v-for 的优先级主要体现在它们的渲染逻辑中

Vue2中 v-for 的优先级高于 v-ifVue3中v-if 的优先级高于 v-for两种写在一起的写法均不被官方推荐 （每次渲染都会先循环再进行条件判断）Vue 3 的改进

Vue 3 通过改变这种优先级，使得开发者在使用 v-if 和 v-for 时，能够更清晰地理解条件渲染的逻辑。这样在 v-if 为 false 时，相关节点不会被渲染，从而避免了访问未定义变量的问题。

主要区别Vue 2: v-for 优先于 v-if，可能导致潜在的错误。Vue 3: v-if 优先于 v-for，提供更健壮的条件渲染逻辑。总结

总的来说，v-for 的优先级高于 v-if，在实际使用中应通过结构上的优化来提高渲染性能。

vue2中体现

源码相关位置 packages\server-renderer\src\optimizing-compiler\codegen.ts

function elementToSegments(el, state): Array<StringSegment> {// v-for / v-if// 通过检查 `el.for` 和 `!el.forProcessed`，如果当前元素有 `v-for` 指令且尚未被处理，就会执行 `genFor` 函数来生成循环内容 if (el.for && !el.forProcessed) { el.forProcessed = true return [ { type: EXPRESSION, value: genFor(el, state, elementToString, '_ssrList') } ] } else if (el.if && !el.ifProcessed) { el.ifProcessed = true return [ { type: EXPRESSION, value: genIf(el, state, elementToString, '"<!---->"') } ] } else if (el.tag === 'template') { return childrenToSegments(el, state) } const openSegments = elementToOpenTagSegments(el, state) const childrenSegments = childrenToSegments(el, state) const { isUnaryTag } = state.options const close = isUnaryTag && isUnaryTag(el.tag) ? [] : [{ type: RAW, value: `</${el.tag}>` }] return openSegments.concat(childrenSegments, close)}

export function genElement(el: ASTElement, state: CodegenState): string { if (el.parent) { el.pre = el.pre || el.parent.pre } if (el.staticRoot && !el.staticProcessed) { return genStatic(el, state) } else if (el.once && !el.onceProcessed) { return genOnce(el, state) } else if (el.for && !el.forProcessed) { return genFor(el, state) } else if (el.if && !el.ifProcessed) { return genIf(el, state) } else if (el.tag === 'template' && !el.slotTarget && !state.pre) { return genChildren(el, state) || 'void 0' } else if (el.tag === 'slot') { return genSlot(el, state) } else { // component or element let code if (el.component) { code = genComponent(el.component, el, state) } else { let data const maybeComponent = state.maybeComponent(el) if (!el.plain || (el.pre && maybeComponent)) { data = genData(el, state) } let tag: string | undefined // check if this is a component in <script setup> const bindings = state.options.bindings if (maybeComponent && bindings && bindings.__isScriptSetup !== false) { tag = checkBindingType(bindings, el.tag) } if (!tag) tag = `'${el.tag}'` const children = el.inlineTemplate ? null : genChildren(el, state, true) code = `_c(${tag}${ data ? `,${data}` : '' // data }${ children ? `,${children}` : '' // children })` } // module transforms for (let i = 0; i < state.transforms.length; i++) { code = state.transforms[i](el, code) } return code }}

vue3中体现

在 createIfBranch 函数中，如果节点同时存在 v-if 和 v-for，则首先会检测 v-for 指令的存在（通过 findDir(node, 'for')）。如果存在 v-for，处理逻辑会收紧为将整个 v-for 循环作为子节点，即使有多个条件分支。这样，在 Vue 渲染过程中，可以确保 v-for 在逻辑上优先于 v-if，同时生成的条件分支可以动态的决定是否渲染。

function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode { const isTemplateIf = node.tagType === ElementTypes.TEMPLATE return { type: NodeTypes.IF_BRANCH, loc: node.loc, condition: dir.name === 'else' ? undefined : dir.exp, children: isTemplateIf && !findDir(node, 'for') ? node.children : [node], userKey: findProp(node, `key`), isTemplateIf, }}

render函数--> 虚拟DOM -->真实DOM 这样的过程,呈现到页面当中

vue2编译成的render函数 v2.template-explorer网址

vue3编译成的render函数 vue3-template-explorer网址

在 Vue 2 和 Vue 3 中，优化 v-if 和 v-for 同时出现的情况可以通过不同的方式实现，以下是一些具体的优化示例。

Vue 2 的优化示例

假设我们有一个包含用户信息的列表，并且我们只想渲染状态为“可见”的用户。以下是一个可能的 Vue 2 组件示例：

<template> <ul> <li v-for="user in users" :key="user.id" v-if="user.visible"> {{ user.name }} </li> </ul></template><script>export default { data() { return { users: [ { id: 1, name: 'Alice', visible: true }, { id: 2, name: 'Bob', visible: false }, { id: 3, name: 'Charlie', visible: true }, ], }; },};</script>

优化建议：可以首先过滤出可见的用户，然后再进行循环，从而避免在 DOM 中无用的占位元素。

<template> <ul> <li v-for="user in visibleUsers" :key="user.id"> {{ user.name }} </li> </ul></template><script>export default { data() { return { users: [ { id: 1, name: 'Alice', visible: true }, { id: 2, name: 'Bob', visible: false }, { id: 3, name: 'Charlie', visible: true }, ], }; }, computed: { visibleUsers() { return this.users.filter(user => user.visible); }, },};</script>

通过这种方式，我们只遍历可见的用户，有效减少了不必要的渲染计算。

Vue 3 的优化示例

在 Vue 3 中，我们同样关注 v-if 和 v-for 的使用，但通过 Vue 3 的更优编译机制，可以进一步优化。例如：

<template> <ul> <li v-for="user in users" :key="user.id" v-if="user.visible"> {{ user.name }} </li> </ul></template><script setup>import { ref, computed } from 'vue';const users = ref([ { id: 1, name: 'Alice', visible: true }, { id: 2, name: 'Bob', visible: false }, { id: 3, name: 'Charlie', visible: true },]);const visibleUsers = computed(() => { return users.value.filter(user => user.visible);});</script>

在 Vue 3 中，使用 setup 语法糖，我们可以利用 computed 属性来过滤用户。这种方式更加清晰，并且在 Vue 3 的编译器内部，处理方式也更为高效。

总结过滤而不是条件渲染：在 v-if 与 v-for 同时使用时，优先使用计算属性或过滤逻辑，避免在循环中使用条件判断。利用 computed：通过计算属性来维护可见用户的列表，使得渲染逻辑更加清晰并提高性能。选择适当的渲染函数：在 Vue 3 中的实现让编译器能更聪明地处理渲染，利用 setup 和 computed 的组合，进一步提高了性能。

作者：鱼樱前端链接：https://juejin.cn/post/7435991972228038671