Vue3源码：v-for

原理部分

以下面代码为例：

<script setup>
import { ref, reactive, computed, watch } from "vue";
let number = reactive(Array.from({ length: 7 }, (v, i) => { return { id: i + 1 } }));
</script>

<template>
  <div>
    <div v-for="item in number" :key="item.id">
      {{ item.id }}
    </div>
  </div>
</template>

vite解析后的vue文件：

执行_sfc_render获取vnode树的时候，通过_renderList循环生成子节点，代码如下：

v-if、v-for为什么不能一块用

以下为例：

<script setup>
import { ref, reactive, computed, watch } from "vue";
let number = reactive(Array.from({ length: 7 }, (v, i) => { return { id: i + 1 } }));
</script>

<template>
  <div>
    <div v-for="item in number" :key="item.id" v-if="item.id">
      {{ item.id }}
    </div>
  </div>
</template>

vite解析后的vue文件： if在外层先判断，for在内层，判断的时候还没item呢，会导致报错