Vue 2组合式API返回语句触发vue/no-dupe-keys错误，用法是否正确？

错误原因 #

你遇到的vue/no-dupe-keys错误，核心原因是props中已定义images属性，而setup函数返回的对象里又包含同名的images。在Vue 2的组件逻辑中，setup返回的属性会与props、data等选项中的属性合并，ESLint的vue/no-dupe-keys规则会检测到这种重复键并报错。

另外，你的代码里还有一个组合式API的使用错误：const { images: imagesFromProps } = toRef(props)写法不正确。toRef的正确用法是接收两个参数（目标对象和属性名），用来将单个属性转为ref；如果要解构多个props的ref，应该用toRefs。同时注意，Vue 2组合式API的工具函数要从@vue/composition-api包导入，而非Vue 3的vue包。

修正后的代码 #

方案1：重命名返回的计算属性（推荐） #

将返回的computed属性改名，避免与props的images重名，同时修正ref的获取方式：

<script>
import { defineComponent, computed, toRef } from '@vue/composition-api'
import fetchOtherImages from 'some-library'

export default defineComponent({
  name: 'PhotoGallery',
  props: {
    images: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    // 正确获取props中images的ref
    const imagesFromProps = toRef(props, 'images')
    // 或者用toRefs解构：
    // const { images: imagesFromProps } = toRefs(props)

    // 重命名计算属性，避免与props重名
    const allImages = computed(() => [
      ...imagesFromProps.value.map(image => image.getUrl()),
      ...fetchOtherImages()
    ])
    return { allImages }
  },
})
</script>

方案2：调整ESLint规则（不推荐） #

如果一定要保留同名，可在ESLint配置中禁用vue/no-dupe-keys规则，但这会掩盖真正的重复键问题，不建议这么做：

// .eslintrc.js 或相关配置文件
module.exports = {
  rules: {
    'vue/no-dupe-keys': 'off'
  }
}

额外注意点 #

• 若fetchOtherImages是异步操作，建议在onMounted等生命周期钩子中调用并处理结果，避免在computed中直接执行异步函数导致重复触发或状态异常。

内容的提问来源于stack exchange，提问作者starleaf1