Vue组件中@property语法含义及来源咨询

1. 语法本质 #

@property 主要有两种常见用法，均服务于Vue+TypeScript的类型声明场景：

• 一种是JSDoc注释语法：属于代码注释范畴，用来给组件props标注类型信息；
• 另一种是TypeScript装饰器语法：基于第三方库实现的类式组件props声明语法，是简化代码的语法糖。

2. 为什么全局搜不到相关引用？ #

场景一：JSDoc注释（无依赖库） #

如果你的代码是在<script setup>中，写法类似下方示例，那这就是JSDoc标准注释，用来给defineProps声明的props补充类型说明，配合Vue官方的Volar插件就能实现类型校验和编辑器提示。这种写法不需要引入任何第三方库，只是纯注释，所以全局搜索自然找不到代码层面的引用：

<script setup>
/**
 * @property {string} title - 组件标题
 * @property {number} count - 计数数值
 */
const props = defineProps(['title', 'count'])
</script>

场景二：TypeScript装饰器（有依赖但特殊使用） #

如果是在类式组件中直接写@property()（更常见的是@Prop()，可能是项目自定义了别名或使用旧版本库），这是vue-property-decorator或vue-class-component这类库提供的装饰器，用来简化类式组件的props声明。如果搜不到引用，大概率是以下情况：

• 依赖已安装，但组件通过全局导入、自定义全局装饰器的方式使用，没有在单个组件文件中显式导入；
• 项目内部将@Prop重命名为了@property。

示例类式组件代码：

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  @Prop({ type: String, required: true }) private title!: string;
}
</script>

3. 快速排查建议 #

• 先看代码中的<script>标签类型：如果是<script setup>，优先考虑JSDoc注释的情况；如果是类式组件，去项目的package.json中查找vue-property-decorator或vue-class-component依赖；
• 检查编辑器的Volar插件：它默认支持JSDoc的@property语法来增强props类型提示，无需额外配置。

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