vue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Vue

The skill is based on Vue 3.5+, generated at 2026-01-28.

Vue is a progressive JavaScript framework for building user interfaces. It builds on standard HTML, CSS, and JavaScript with intuitive API and world-class documentation. The Composition API with

<script setup>

and TypeScript is the recommended approach for building Vue applications.

本技能基于Vue 3.5+版本生成，生成时间为2026年1月28日。

Vue是一款用于构建用户界面的渐进式JavaScript框架。它基于标准HTML、CSS和JavaScript构建，拥有直观的API和世界级的文档。结合

<script setup>

的Composition API与TypeScript是构建Vue应用的推荐方案。

Core References

核心参考

Topic	Description	Reference
Reactivity System	ref, reactive, computed, watch, and watchEffect	core-reactivity

主题	描述	参考
响应式系统	ref、reactive、computed、watch和watchEffect	core-reactivity

Components

组件

Topic	Description	Reference
Props	Declare and validate component props with TypeScript	components-props
Events (Emits)	Emit custom events from components	components-emits
Slots	Pass template content to child components	components-slots
v-model	Two-way binding on custom components	components-v-model
Lifecycle Hooks	Run code at specific component lifecycle stages	components-lifecycle

主题	描述	参考
Props	使用TypeScript声明并验证组件Props	components-props
自定义事件（Emits）	从组件中触发自定义事件	components-emits
插槽（Slots）	向子组件传递模板内容	components-slots
v-model	自定义组件上的双向绑定	components-v-model
生命周期钩子	在组件生命周期的特定阶段执行代码	components-lifecycle

Features

功能特性

Script Setup & TypeScript

Topic	Description	Reference
Script Setup	Composition API syntactic sugar for SFCs	features-script-setup
TypeScript	Type-safe Vue components with Composition API	features-typescript

主题	描述	参考
Script Setup	单文件组件（SFC）的Composition API语法糖	features-script-setup
TypeScript	结合Composition API实现类型安全的Vue组件	features-typescript

Reusability

可复用性

Topic	Description	Reference
Composables	Encapsulate and reuse stateful logic	features-composables
Custom Directives	Low-level DOM manipulation directives	features-directives
Template Refs	Direct DOM and component instance access	features-template-refs

主题	描述	参考
组合式函数（Composables）	封装并复用有状态逻辑	features-composables
自定义指令	底层DOM操作指令	features-directives
模板引用（Template Refs）	直接访问DOM和组件实例	features-template-refs

Advanced

进阶内容

Topic	Description	Reference
Provide/Inject	Dependency injection across component tree	advanced-provide-inject
Async & Suspense	Top-level await pitfalls, async components, Suspense	advanced-async-suspense

主题	描述	参考
Provide/Inject	跨组件树的依赖注入	advanced-provide-inject
异步与Suspense	顶层await陷阱、异步组件、Suspense	advanced-async-suspense

Key Recommendations

关键建议

Use
<script setup lang="ts">
for all components
Prefer
ref()
over
reactive()
for declaring state
Use type-based prop declarations with interfaces
Use
defineModel()
for v-model (3.4+)
Destructure props reactively (3.5+) for cleaner code
Extract composables for reusable stateful logic

所有组件均使用
<script setup lang="ts">
**优先使用
```
ref()
```
而非
```
reactive()
```
**声明状态
使用基于类型的Props声明（结合接口）
**使用
```
defineModel()
```
**实现v-model（3.4+版本）
响应式解构Props（3.5+版本）以简化代码
提取组合式函数用于复用有状态逻辑