v-for 循环中数据更新子组件视图不更新解决方案

背景：
页面是一个瀑布流的编辑/展示页面，展示周报信息，滑到底部，点击更多加载更多条数。

需求：原需求日期搜索是按最近一个月、三个月、最近一年搜索，修改为按自定义时间段搜索

问题：问题来了，测试反馈每次搜索开始时间‘2022-01-03’ ~‘2021-01-09’ ,页面渲染有问题。为什么呢？

经过测试发现问题，搜索时，数据变化是正确的，但是子组件child中没监听到content的变化

思考：可能是搜索后，新老dom树进行对比，发现key，也就是id一样时，复用了原节点，导致的子组件没更新。

解决方法：保证每次搜索之后，key都是唯一的，因此
:key=“Math.random()” ,修改后发现做编辑或者其他操作时，页面明显卡顿，因此调整了下，处理了下接口返回的数据, :key=“item.id + item.random”

// 示例代码
<template>
	<div v-for="item in data" :key="item.id">
		<child :content="item.content"></child>
	</div>
</template>

// 样例数据
var data = [
  {
	id: 2,
	content: '',
    startTime: '2022-01-10',
	endTime: '2022-01-15'
  },
  {
	id: 1,
	content: ''
	startTime: '2022-01-03',
	endTime: '2022-01-09'
  },
]

// 修改后数据
var random = Math.random()
data.forEach((item) => {this.$set(item, 'random', random)})