处理请求回来的一组数据，将图片地址的长字符值切分成数组，并在数组元素前面拼接服务器前缀；向每一个数据新添加响应式属性；页面渲染后实现底部上拉继续请求并渲染数据

代码实现：

<template>
	<PostComponment :postList="postList"></PostComponment>
</template>

<script setup>
	import {myRequest} from "../../uti/api.js"

    //定义数据
	let postList = ref([])
	//页面数量
	let pageNum =ref(1)
	//postList中的评论总数，评论总数/一页数据的大小=页面的数量
	let pageTotal=ref(0)
	//一页数据的大小
	let pageSize=ref(10)
	
	onMounted(()=>{
		getPostData(pageNum.value)
	})

	//底部上拉发送请求
	onReachBottom(()=>{
		if(pageNum.value+1<=pageTotal.value/pageSize.value+1){
			getPostData(++pageNum.value)
		}
	})
	
	//请求数据
	function getPostData(value) {
	      myRequest({
	        url: `/xxx/xxx/list?pageNum=${value}`
	      }).then(res => {
			console.log(res.data.rows);
	        let temp = res.data.rows;   
	        let tempPostList = ref(
				temp.map(post => {
					const newPost = reactive({
						...post,
						commentsList : [],
						commentareaIsShow : false,
						likesState:true
	
					})
                    //判断imagesList是否为空
					if(newPost.imagesList){
						const images = newPost.imagesList.split(',').map(img => img.trim());
						// 为每个地址添加前缀
						const imageslist = images.map(img => `https://example.com/${img}`);
						return {...newPost, imagesList : imageslist};
					}
					return {...newPost}
				})
			)
			postList.value = postList.value.concat(tempPostList.value);
		})
	}
	
</script>

<style>

</style>

补充：

        这些数据处理的情景是，后台上传图片，虽然图片在服务器中，但是数据库储存的是不完全路径，并且数据库参数没有数组的类型，所以上传多张图片时是以“，”简单分隔的一串长字符，然后通过后端接口返回到前端手中，按照页面渲染的逻辑，需要将每个对象中的imageList进行处理，让其变成完整的图片地址数组，让页面能成功渲染；添加属性是方便实现某些交互操作；一次请求只返回数据库的10条数据，当用户有下拉操作时应继续请求数据并渲染。

        上面是实现目标要求，处理相应数据的主要的代码。细节不同，代码不同，上仅供参考。