背景:
页面是一个瀑布流的编辑/展示页面,展示周报信息,滑到底部,点击更多加载更多条数。
需求:原需求日期搜索是按最近一个月、三个月、最近一年搜索,修改为按自定义时间段搜索
问题:问题来了,测试反馈每次搜索开始时间‘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)})