切换语言为:繁体

v-for 和 v-if 的优先级比较

  • 爱糖宝
  • 2024-11-11
  • 2037
  • 0
  • 0

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

问题发生

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

结论

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

  • Vue2中 v-for 的优先级高于 v-if

  • Vue3中v-if 的优先级高于 v-for

  • 两种写在一起的写法均不被官方推荐 (每次渲染都会先循环再进行条件判断)

Vue 3 的改进

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

主要区别

  • Vue 2v-for 优先于 v-if,可能导致潜在的错误。

  • Vue 3v-if 优先于 v-for,提供更健壮的条件渲染逻辑。

总结

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

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网址

v-for 和 v-if 的优先级比较

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

v-for 和 v-if 的优先级比较

在 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 的编译器内部,处理方式也更为高效。

总结

  1. 过滤而不是条件渲染:在 v-if 与 v-for 同时使用时,优先使用计算属性或过滤逻辑,避免在循环中使用条件判断。

  2. 利用 computed:通过计算属性来维护可见用户的列表,使得渲染逻辑更加清晰并提高性能。

  3. 选择适当的渲染函数:在 Vue 3 中的实现让编译器能更聪明地处理渲染,利用 setup 和 computed 的组合,进一步提高了性能。


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


0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.