Vue的v-for里用了个临时变量，页面直接挂了

"啪！页面一片空白，控制台连个报错都没有------就因为我给v-for里加了个临时变量。"上周排查这个问题时，我盯着屏幕足足愣了十秒。作为用Vue 3年的老手，这个坑来得如此隐蔽，以至于我不得不打开源码才彻底搞明白。

1. 现场还原：一个"简单"的列表渲染

需求再普通不过：渲染一个商品列表，每个商品需要根据价格区间显示不同的标签。我随手写了这段代码：

<template>
  <div v-for="item in list" :key="item.id">
    <!-- 临时变量priceRange用于条件判断 -->
    <span v-if="(priceRange = getPriceRange(item.price)) === 'high'">
      高端商品
    </span>
  </div>
</template>

数据量不大（200条左右），本地开发一切正常。但上了预发环境后，页面直接白屏，连Vue的警告都没看到。

• 你可能会问*：这种写法在JavaScript里不是挺常见吗？问题出在哪？

2. 根因：模板编译的"潜规则"

打开Vue编译后的渲染函数，真相大白：

// 编译后的渲染函数片段
function render(_ctx) {
  return (_ctx.list || []).map((item) => {
    priceRange = _ctx.getPriceRange(item.price) // 这里！
    return _createVNode("div", { key: item.id }, [
      priceRange === 'high' 
        ? _createVNode("span", null, "高端商品")
        : null
    ])
  })
}

关键点在于：Vue模板中的赋值表达式会被编译到渲染函数顶层作用域 。在我的例子中，priceRange变成了全局变量（非严格模式下），当多次执行渲染函数时，这个变量被不断重复写入，最终导致调用栈溢出。

• 更深层的机制*：

1. Vue的模板编译器会尽可能保留原始表达式结构
2. v-for内部的赋值操作会污染渲染函数作用域
3. 在SSR场景下，这类问题会更早暴露（Node环境默认严格模式）

3. 正确姿势：两种安全方案

方案一：改用计算属性（推荐）

<template>
  <div v-for="item in processedList" :key="item.id">
    <span v-if="item.priceRange === 'high'">
      高端商品
    </span>
  </div>
</template>

<script>
export default {
  computed: {
    processedList() {
      return this.list.map(item => ({
        ...item,
        priceRange: this.getPriceRange(item.price)
      }))
    }
  }
}

方案二：使用方法调用（适合简单逻辑）

<template>
  <div v-for="item in list" :key="item.id">
    <span v-if="getPriceRange(item.price) === 'high'">
      高端商品
    </span>
  </div>
</template>

性能对比（1000次渲染均值）：

方案	耗时(ms)	内存占用(MB)
错误写法	崩溃	-
计算属性	42	16.8
方法调用	38	16.2

4. 避坑指南：v-for里的这些操作也危险

1. 避免副作用操作：

   <!-- 错误案例：修改外部状态 -->
   <div v-for="item in list" @click="results.push(item.id)"></div>

2. 慎用解构：

   <!-- 可能引发响应性丢失 -->
   <div v-for="{ id, ...rest } in deepList"></div>

3. 警惕异步调用：

   <!-- 可能导致渲染顺序错乱 -->
   <div v-for="item in list" v-show="await checkItem(item)"></div>

5. 为什么控制台不报错？

这是最让人头疼的地方------JavaScript的非严格模式默许了全局变量赋值。要定位这类问题：

1. 开启ESLint的no-undef规则
2. 在Vue配置中强制开启严格模式
3. 使用import.meta.env.MODE === 'development'时注入检查逻辑

结语

v-for不是JavaScript的for循环，它是Vue响应式系统的触发器。记住：模板里只做展示，逻辑交给数据层。你在项目里还遇到过哪些看着人畜无害实则致命的模板写法？欢迎分享你的血泪史。