Vue.js中有无子组件时v-for的执行差异分析

咱们来拆解Vue.js里嵌套v-for在「无自定义子组件」和「有自定义子组件」两种场景下的执行差异，就用你给出的模板和log函数为例来分析。

1. 无自定义子组件：原生元素嵌套场景 #

当模板里全是<div>这类原生HTML元素、没有自定义组件时，Vue会把整个嵌套结构当作同一个渲染上下文处理，循环逻辑是同步连贯执行的。

执行流程 #

• 遍历objArr中的每个对象o：
  • 首先执行log('base')，打印base；因为返回true，进入内层循环
  • 紧接着遍历当前o.f数组的每一项，每迭代一次就执行log('subbase')，打印subbase
  • 等当前o的内层循环完全执行完毕后，才会进入下一个objArr项的外层循环

示例打印顺序 #

假设objArr = [{f: [1,2]}, {f: [3]}]，控制台输出顺序为：

base
subbase
subbase
base
subbase

2. 有自定义子组件：嵌套组件场景 #

如果把内层的循环<div>替换成自定义子组件，比如将内层逻辑封装到<SubList>组件中，此时核心差异来自组件的独立渲染上下文与生命周期隔离。

修改后的示例模板 #

<!-- 父组件模板 -->
<template>
  <div>
    <div v-for="o in objArr" v-if="log('base')">
      <SubList :list="o.f" />
    </div>
  </div>
</template>

<!-- SubList子组件模板 -->
<template>
  <div v-for="a in list" v-if="log('subbase')"></div>
</template>

执行流程 #

• 遍历objArr中的每个对象o：
  • 执行log('base')，打印base；通过后创建SubList组件实例
  • 父组件不会立即执行子组件内部的循环，而是先完成自身当前迭代的节点创建，继续处理下一个objArr项（也就是先把所有外层的base打印完毕）
  • 当父组件完成所有外层循环的节点初始化后，Vue会依次触发每个SubList组件的挂载与渲染流程，此时子组件内部的v-for才会执行，打印对应的subbase

示例打印顺序 #

还是用objArr = [{f: [1,2]}, {f: [3]}]，控制台输出顺序变为：

base
base
subbase
subbase
subbase

额外细节 #

如果子组件是异步组件，这个顺序差异会更显著：父组件会先完成所有外层base的打印，等异步组件加载完成并挂载后，才会触发子组件内部的subbase打印。另外，组件隔离性也会让内层循环的状态完全归属于子组件，父组件无法直接干预，数据更新时子组件会独立触发更新逻辑，而原生元素嵌套则共享父级上下文，更新更连贯。

内容的提问来源于stack exchange，提问作者jeykey