错误重现

项目中请避免像这样注释vue sfc

//foo.vue
<template>
    <!--组件的注释-->
    <div class="foo">
        组件内容
    </div>
</template>

//bar.vue
<template>
    <foo class="fooClass"/>
</template>

在vue3中,会抛出错误

问题分析

这样的注释在vue3中会存在巨大隐患 。导致组件被识别成多根节点组件。class等属性无法被直接继承到.foo上

解决方式

可以参考以下的方式对组件进行注释

<!-- 组件的作用 -->
<template>
    <div class="foo">
        组件内容
    </div>
</template>

或者添加更加丰富的注释信息到vue组件

参考

• Vue 项目注释规范 - 掘金 (juejin.cn)
• SFC 语法定义 # 注释

<!--
 * @FileDescription: 该文件的描述信息
 * @Author: 作者信息
 * @Date: 文件创建时间
 * @LastEditors: 最后更新作者
 * @LastEditTime: 最后更新时间
-->
<template>
    <!--组件的注释-->
    <div class="foo">
        组件内容
    </div>
</template>

同时vue官网也提及了一种添加自定义块(custom-blocks)docs标签的注释方式 SFC 语法定义 # 自定义块