Vue3+TypeScript中Props解构重命名引发的两类问题排查

问题1：ESLint报“Duplicate key 'date1'”的原因 #

在<script setup>中，defineProps的编译逻辑会将声明的prop名称（比如date1）自动注入到当前作用域，作为组件实例的属性标识。当你直接解构defineProps返回的对象并重命名（date1: inputDate1）时，原prop名date1依然会被保留在作用域内，此时再定义const date1='abc'就会触发标识符重复的ESLint错误。

问题2：模板访问isSelected时出现未定义警告的原因 #

defineProps返回的是响应式代理对象，直接解构会丢失响应式特性。更关键的是，<script setup>的编译规则里，只有原始的prop名称（比如modelValue）会被自动注册到组件实例上供模板访问。你重命名后的isSelected只是普通变量，并没有被Vue编译器识别为需要暴露给模板的属性，因此模板渲染时会找不到该变量并抛出警告。而脚本中能打印isSelected是因为变量本身在脚本作用域内存在，但未挂载到组件实例上。

正确的解决方式 #

使用Vue提供的toRefs或toRef工具，将props属性转换为响应式ref对象，既保留响应式，又能安全重命名，同时避免作用域冲突：

<script setup lang="ts">
import { toRefs } from 'vue'

// 先声明props类型及结构
const props = defineProps<{
  modelValue: boolean
  date1: string
}>()

// 用toRefs解构并重命名，得到响应式ref对象
const { modelValue: isSelected, date1: inputDate1 } = toRefs(props)

// 此时定义date1不会触发ESLint错误
const date1 = 'abc'

// 脚本中访问ref需要使用.value
console.log(isSelected.value)
</script>

<template>
  <!-- 模板中ref会自动解包，直接访问变量名即可 -->
  <div>选中状态：{{ isSelected }}</div>
  <div>输入日期：{{ inputDate1 }}</div>
</template>

为什么这样有效？ #

1. toRefs将props的每个属性转换为独立的响应式ref，解构后不会丢失响应式。
2. 原prop名不会污染当前作用域，因此可以自由定义同名变量（比如date1）。
3. 通过toRefs处理后的isSelected是响应式ref，Vue会自动将其关联到组件实例，模板可正常访问。

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