Vue.js在v-for循环中递增全局变量出现无限循环问题求助

你的写法触发了Vue的无限更新循环，这就是数值疯涨、控制台报错的原因——Vue的渲染函数是响应式的，每次调用incrementGlobalVariable()修改globalVariable，Vue会检测到数据变化并重新渲染；而重新渲染时又会再次调用这个方法修改数据，循环往复，最终导致数值飙升。

下面给出两种靠谱的解决方案：

方案1：直接利用v-for的index（最简洁） #

如果你要的只是循环时的递增序号，v-for自带的index参数完全能满足需求，根本不需要额外的全局变量：

修改模板代码：

<div id="app">
  <ul>
    <li v-for="(post, index) in posts" :key="post.id">
      <p>Global Variable @ {{ post.title }}: {{ index + 1 }}</p>
    </li>
  </ul>
  <p>Global Variable: {{ posts.length }}</p>
</div>

这样直接就能得到你要的1、2、3，完全不会有循环问题。

方案2：初始化时预计算递增值（适用于复杂场景） #

如果你的实际需求不是简单的列表序号，确实需要用变量记录递增结果，那应该在组件初始化阶段就计算好，而不是在渲染时修改数据：

修改JS代码：

new Vue({
  el: '#app',
  data() {
    return {
      globalVariable: 0,
      posts: [
        { id: 1, title: 'Post A' },
        { id: 2, title: 'Post B' },
        { id: 3, title: 'Post C' }
      ]
    };
  },
  created() {
    // 初始化时直接把全局变量设为最终值
    this.globalVariable = this.posts.length;
    // 要是需要给每个帖子单独绑定序号，可以这样做：
    // this.posts = this.posts.map((item, idx) => ({ ...item, seq: idx + 1 }));
  }
});

对应模板可以改成：

<div id="app">
  <ul>
    <!-- 用index的写法 -->
    <li v-for="(post, index) in posts" :key="post.id">
      <p>Global Variable @ {{ post.title }}: {{ index + 1 }}</p>
    </li>
    <!-- 如果用了map给帖子加seq，就这么写 -->
    <!-- <li v-for="post in posts" :key="post.id">
      <p>Global Variable @ {{ post.title }}: {{ post.seq }}</p>
    </li> -->
  </ul>
  <p>Global Variable: {{ globalVariable }}</p>
</div>

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