Vue中v-for循环内使用响应式ref控制总渲染数量问题

原代码的问题根源 #

你之前的写法存在两个核心问题：

1. 模板中执行副作用操作：{{ currentlyRenderedItems++ }}属于直接修改响应式变量的副作用操作，Vue要求模板表达式必须是纯函数（无状态修改、无副作用），否则会触发重复渲染、状态混乱，最终导致只计数却不渲染内容。
2. 渲染逻辑依赖临时状态：直接在循环中依赖currentlyRenderedItems的实时值，会因为Vue的渲染周期机制，导致计数在渲染前就被耗尽，无法正确匹配元素渲染。

正确实现方案 #

因为需要在不同区域分别渲染两个数组的元素，且总数量不超过3、arr1优先级更高，我们可以通过计算属性提前算出每个数组的渲染数量，再在模板中做条件渲染，完全符合Vue的声明式逻辑：

<template>
  <!-- 渲染arr1的元素：优先占满名额 -->
  <div v-for="(item, index) in arr1" :key="index" v-if="index < renderCountArr1">
    {{ item }}
  </div>

  <div>Some other stuff happening here!</div>

  <!-- 渲染arr2的元素：使用arr1剩余的名额 -->
  <div v-for="(item, index) in arr2" :key="index" v-if="index < renderCountArr2">
    {{ item }}
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const arr1 = ref(["what", "is"]);
const arr2 = ref(["going", "on"]);
const maxTotal = 3;

// 计算arr1需要渲染的数量：取数组长度和最大名额的较小值
const renderCountArr1 = computed(() => Math.min(arr1.value.length, maxTotal));
// 计算arr2需要渲染的数量：总名额减去arr1用掉的，不能为负数
const renderCountArr2 = computed(() => Math.max(maxTotal - renderCountArr1.value, 0));
</script>

方案优势 #

• 完全遵循Vue的声明式渲染规则，无副作用操作，状态稳定。
• 响应式支持：如果arr1或arr2的内容动态变化，计算属性会自动更新渲染数量。
• 精准满足需求：
  • 场景1（arr1=[a,b], arr2=[c,d]）：arr1渲染2个，arr2渲染1个，总数量3。
  • 场景2（arr1有5个元素）：arr1渲染前3个，arr2渲染0个。

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