vue.js track-by的正确使用方法

Question

1.router-view使用了keep-alive,一个滚动加载的列表使用了track-by="id"，
id是唯一的，第一次从外部view加入列表没啥问题，第二次加入就会报duplicate的错误，并建议我使用track-by="$index"。

vue.js:991 [Vue warn]: Duplicate value found in v-for="comment in comments": {......}. Use track-by="$index" if you are expecting duplicate values. (found in component: <v-notification-comments>)

是我使用姿势不对么，keep-alive会把组件保留在内存中避免重新渲染，但是列表数据每次都是重新获取的，而且是在嵌套路由下面的。

Answer 1

路由变化,数据重新请求, 主要看你获取数据是在ready还是route->data里...

如果是在ready里, 用keep-alive不会数据重载, 甚至在同一个路由下, 只是id不一样也不会重载
如果是在route->data里, 只要路由切换了, 都会重载, 不管有没有keep-alive...

至于用哪个, 看你的项目来选择, 如果当前页面内容里有路由和当前路由一样的, 那么只能在route->data

可以把数据存在本地存储, 然后判断是否需要从服务器拉取

我目前是用vuex, 数据在route->data里请求, 不过请求前我会判断在vuex里有没有数据, 如果没有数据就请求, 有数据直接从vuex里拉取

====

以上只是个人在使用过程中理解, 不一定正确, 仅供参考

Answer 2

因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。

按你的需求是希望循环comments,如果comments中没有需要复用的数据,可以直接写
<component v-for="comment in comments" track-by="$index"></component>
,如果所有的comments可以用id区分,则可以使用
<component v-for="comment in comments" track-by="id"></component>, 然后在替换数组comments 时，如果 Vue.js 遇到一个包含 id: 'xxx' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。

按你说的,第一次没有问题,第二次会出现,应该是主键冲突了

Answer 3

感谢邀请，虽然也正好在学习VUE，但是还没有碰到相关的问题 ，
既然waring 提醒你用 track-by="$index" 你先改一下呗
还有

track-by="id" 不应该是 track=by="{{id}}" 么