在 v-for 中定义变量有什么问题吗？

Question

AFAIK，首先由弗拉基米尔·米洛舍维奇 (Vladimir Milosevic) 在这里展示

 <div
    v-for="( id, index, user=usersData[id], doubleId=doubleThat(id) ) in users"
    :key="id"> 
    {{ user.name }}, {{ user.age }} years old And DoubleId = {{ doubleId }}
  </div>

我扩展了他的代码笔。 看起来您可以通过这种方式在循环中定义几个局部变量。

您发现这种技术有任何副作用或风险吗？ 我发现这种方式是最方便和最干净的方式，但由于这显然不是预期用途，因此可能无法适应未来。

编辑：

这是另一支更好地演示用例的笔。 虽然在这里我们只在一个地方引用了一个计算属性，但如果属性和引用的数量增加，就会导致代码冗长。

Answer 1

一般来说，我认为做你想做的事情的干净方法是将数据转换成一种格式，你可以在其中循环它而无需额外的步骤。 这样，您将永远不需要v-for中的那些额外变量。

您的代码笔中的示例可能如下所示：

const app = new Vue({
  el: '#app',
  data: {
    years: [2024, 2025, 2120],
    usersData: {...}
  },
  computed: {
    // user objects for each year
    ageData() {
      return Object.fromEntries(this.years.map(year => [year, 
        Object.values(this.usersData).map(user => this.userInYear(user, year))
      ] ))
    }
  },
  methods: {
    userInYear(user, year){
      return {...user, age: user.age + (year - 2023)}
    }
  },
});

现在您可以不间断地迭代它，也不会发生恶作剧：

<div v-for="(users, year) in ageData" :key="year">
  <b>In {{ year }}:</b>
  <div v-for="user in users" :key="user.name"> 
    {{ user.name }} will be {{ user.age }} years old.
  </div>
</div>

它更易于阅读和更改，并且还有一个额外的好处，即您可以在控制台中检查ageData 。

也就是说，我认为你可以在v-for中声明额外的变量是非常有趣的，我认为这是可能的，因为 vue 从提供的字符串解析和构建表达式的方式，我很确定它不会被删除，如果您和与您一起工作的人对此感到满意（并且准备像刚才一样一遍又一遍地听到上述内容），请务必拨打 go。