[vue3优化] Vue3 的 `props` 应该是只读的，用 import 代替 require

  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`。这样既遵循了规范，避免在计算属性返回的列表不会产生副作用。