Vue中使用new Date().getTime()作为组件遍历时的key值会导致组件不断销毁和创建的问题

问题表现

在项目中遇到的一个问题，在子组件中监听父组件给其传递的一个值，但发现监听回调不生效，经反复调试发现，子组件多次触发了created和destroyed生命周期钩子，也就是说子组件被多次的创建和销毁

问题解决

查询原因，了解到有以下的几种情况会导致子组件不断地创建和销毁:

1. 父组件频繁重新渲染：如果父组件的数据频繁变化，导致父组件重新渲染，那么子组件也会跟着重新渲染
2. 条件渲染问题：如果在父组件中使用了条件渲染（v-if / v-show），当条件发生变化时，子组件会根据条件的真假进行挂载和销毁
3. 错误的组件引用：如果在父组件中使用动态组件<component>标签，并且每次渲染时传递给动态组件的组件选项不同，会导致不断地挂载和销毁不同的组件
4. 异步操作问题：如果在组件的生命周期钩子函数中执行了异步操作，并且在异步操作完成之前组件被销毁，那么异步操作的回调函数可能会触发组件的重新挂载

经过排查，以上的四种情况都被排除，各种debugger，不经意瞟了一眼发现组件上不知道哪位同学写上了:key="new Date().getTime()"

<xxx-component>
   v-for="item in dataList"
  :key="new Date().getTime()"
  ...
</xxx-component>

看着怪怪的，恕我孤陋寡闻没见过这种写法，给它改成了:key="item.id"，哦豁就好了

问题原因

查啊查原因，说是每次渲染时，new Date().getTime()都会返回一个不同的时间戳，导致key的值不断变化，从而使Vue无法复用组件实例

当key的值发生变化时，Vue会认为这是一个新的组件，因此会销毁旧的组件实例并创建一个新的组件实例，这就导致了组件不断销毁和创建的循环

要解决这个问题，就需要使用一个稳定的、唯一的值作为:key的值，而不是使用每次渲染时生成的随机时间戳