在 Nuxt "v-for" 中，如何在 v-for 中的每个项目中使用相同的计算属性时避免重复计算？答案

【问题标题】：In Nuxt "v-for", how can I avoid repeated computing when using the same computed property in every item in v-for?在 Nuxt "v-for" 中，如何在 v-for 中的每个项目中使用相同的计算属性时避免重复计算？
【发布时间】：2021-01-26 00:49:12
【问题描述】：

<ul v-for="(item, index) in someList" :key="index">
  <li :class="{'some-class': a_computed_property === item.someData}">
     xxx
  </li>
</ul>

computed: {
    a_computed_property {
       console.log('computed!!!')
       return '123'
    }
}

这是我的代码，“someList”是一个包含三个项目的数组。我发现当我刷新页面时，“计算！！！”在服务器端打印三次（在客户端打印一次），我认为这没有必要，因为我认为这个计算属性应该被缓存并“计算！！！”应该只在服务器端打印一次。那么为什么会发生这种重复计算，有什么办法可以避免呢？

【问题讨论】：

它打印三倍，因为你有 3 个项目？ nuxt / vue 不知道你需要 3 次相同

标签： vue.js frontend nuxt.js server-side-rendering

【解决方案1】：

因为在服务器端渲染 (SSR) 期间，computed 属性不是响应式的，因此不会缓存返回值。

详情请查看this Vue issue...

解决此问题的唯一方法是使用 <client-only> Nuxt component 完全禁用组件的服务器端渲染

【讨论】：