setup(props) {
const PostList = computed(() => {
return props.list.map(post => {
if(!post.image){
// image不再等于字符串了,而是等于一个对象
// 默认图片
post.image = {
url: require('@/assets/column.jpg')
}
} else {
if (post.image && post.image.url){
post.image.url = post.image.url + '?x-oss-process=image/resize,m_pad,h_100,w_100'
}
}
return post
})
})
return {
PostList
}
}
`setup()` 函数,配置了一个名为 `PostList` 的计算属性,这个计算属性返回一个处理过后的帖子列表。这个列表中的每个帖子都会确保有一个 `image` 对象,并对图片 URL 进行了处理。
代码逻辑没啥问题,但是需要优化的点:
1. 直接修改 `props.list` 中的元素可能不是一个好主意,因为 Vue 的 `props` 应该是只读的。最好是创建一个新的对象或者新的列表来避免直接修改 `props`。
2. 使用 `require` 在计算属性中可能会导致问题,因为 `require` 的结果可能无法在模板中正确解析。vue cli 通常是在 `import` 语句中处理静态资源,以确保文件被 webpack 正确处理。
3. 在渲染列表时添加查询参数到图片 URL,可以在模板中处理,也可以在 JavaScript 中处理,优先在模板中处理。
优化后的代码:
<template> <!--模版为:示例代码-->
<div>
<div v-for="post in processedPostList" :key="post.id">
<img :src="post.image.url" alt="Post image">
</div>
</div>
</template>
<script>
import { computed } from 'vue'
import defaultImage from '@/assets/column.jpg' // 使用 import 而不是 require
export default {
props: {
list: Array
},
setup(props) {
// 创建一个新的计算属性,不直接修改 props
const processedPostList = computed(() => {
return props.list.map(post => {
// 不直接修改原始帖子对象,而是创建一个新对象
const newPost = { ...post }
if (!newPost.image) {
newPost.image = {
url: defaultImage
}
} else if (newPost.image && newPost.image.url) {
// 可以在这里添加参数,但也可以在模板中处理
newPost.image.url += '?x-oss-process=image/resize,m_pad,h_100,w_100'
}
return newPost
})
})
return {
processedPostList
}
}
}
</script>
这样使用了 `import` 来引入默认图片,并且创建了一个新的处理后的帖子列表,而不是直接修改原始的 `props.list`。这样既遵循了规范,避免在计算属性返回的列表不会产生副作用。