原文摘要

Vue (Official) 在近日发布了 V3.0.0 大版本更新，我也是在第二时间进行了更新，发现有一些好用的新功能值得一说！

组件引入新方式

现在引入 vue component 可以直接从一侧的文件栏拖拽到 template 标签中。

拖拽后按住 shift 键，会在当前鼠标位置生成一个组件标签，并且在 script 中自动引入改成组件

组件 props 提示

现在使用某个组件时，会直接提示你必传的 props，不用再去组件里找了！

组件点击直接跳转到组件本身

在 template 中点击某个组件，现在会直接跳转到组件文件，而不是 tsconfig 的定义处了！

Props 提示

众所周知，vue3.5 之后（没记错的话）,defindProps 可以直接解构了。

// const props = defineProps<{ id?: string }>()
const { id = '标题' } = defineProps<{ id?: string }>()

假如继续写一个其他的 computed 或者 watch 时，用到这个 id，显示会有一个提示。

告知你这个 id 来自于 props

.value自动补全

当使用一个 ref 变量时，现在会自动补全 .value

设置里需要勾选

结语

以上就是我发现的一些新功能，如果有所遗漏，欢迎在评论区或我的博客站补充～～

原文链接

进一步信息揣测

• Vue 3.0.0的“第二时间更新”可能暗示：作者并非核心团队成员（非首批体验者），但属于早期实践者，其经验更贴近普通开发者视角，可能包含非官方文档的适配技巧。
• 拖拽组件功能的隐藏操作：按住Shift键生成组件标签时，可能需确保IDE（如WebStorm或VSCode插件）已支持此功能，否则可能无效，这是编辑器集成的非公开细节。
• 自动引入组件的潜在问题：拖拽生成的组件引入路径可能是相对路径，若项目结构复杂可能导致路径错误，需手动调整，这是工具链未明确说明的陷阱。
• Props提示的局限性：必传Props提示可能依赖类型定义（如TS），若组件未正确定义类型，提示会失效，需额外配置，属于类型系统的隐性要求。
• 解构Props的注意事项：直接解构defineProps可能导致响应性丢失（如解构后id失去响应性），需依赖Vue 3.5+的隐式处理，但官方未强调此风险。
• .value自动补全的IDE依赖：该功能需特定IDE（如Volar）支持且手动开启设置，非默认启用，属于工具链的“隐藏开关”。
• 跳转组件文件的底层逻辑：跳过tsconfig定义直接跳转可能因项目配置（如别名路径）失败，需确保IDE解析逻辑与项目匹配，这是构建工具的隐性兼容问题。
• 版本兼容性暗示：作者提到“Vue 3.5之后”的功能，实际可能需严格核对版本号（如3.5.1修复的Bug），社区经验表明小版本差异可能导致API行为不同。