vue3

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

Use this skill whenever the user wants to:

Learn or apply Vue 3 guide topics (from Introduction to advanced extras)
Implement Vue 3 components, reactivity, templates, and routing
Follow Vue 3 best practices, TypeScript usage, or performance guidance
Check Vue 3 API reference for specific functions or options

当用户有以下需求时，均可使用此技能：

学习或应用Vue 3指南中的主题（从入门到高级进阶内容）
实现Vue 3组件、响应式、模板和路由功能
遵循Vue 3最佳实践、TypeScript用法或性能优化指引
查询Vue 3 API参考中的特定函数或配置项

How to use this skill

如何使用此技能

Identify the topic from the user request.
Open the matching guide example file in
```
examples/
```
.
If API details are needed, open the matching file in
```
api/
```
.
Follow the official guidance and keep outputs consistent with Vue 3 documentation.

从用户请求中确定主题
打开
examples/
目录下对应的指南示例文件
若需要API细节，打开
```
api/
```
目录下对应的文件
遵循官方指引，确保输出内容与Vue 3文档保持一致

Guide mapping (one-to-one with Guide pages)

指南映射（与指南页面一一对应）

Getting Started

```
examples/getting-started/introduction.md
```
→ https://cn.vuejs.org/guide/introduction.html
```
examples/getting-started/quick-start.md
```
→ https://cn.vuejs.org/guide/quick-start.html

Essentials

```
examples/essentials/application.md
```
→ https://cn.vuejs.org/guide/essentials/application.html
```
examples/essentials/template-syntax.md
```
→ https://cn.vuejs.org/guide/essentials/template-syntax.html
```
examples/essentials/reactivity-fundamentals.md
```
→ https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
```
examples/essentials/computed.md
```
→ https://cn.vuejs.org/guide/essentials/computed.html
```
examples/essentials/class-and-style.md
```
→ https://cn.vuejs.org/guide/essentials/class-and-style.html
```
examples/essentials/conditional.md
```
→ https://cn.vuejs.org/guide/essentials/conditional.html
```
examples/essentials/list.md
```
→ https://cn.vuejs.org/guide/essentials/list.html
```
examples/essentials/event-handling.md
```
→ https://cn.vuejs.org/guide/essentials/event-handling.html
```
examples/essentials/forms.md
```
→ https://cn.vuejs.org/guide/essentials/forms.html
```
examples/essentials/watchers.md
```
→ https://cn.vuejs.org/guide/essentials/watchers.html
```
examples/essentials/template-refs.md
```
→ https://cn.vuejs.org/guide/essentials/template-refs.html
```
examples/essentials/component-basics.md
```
→ https://cn.vuejs.org/guide/essentials/component-basics.html
```
examples/essentials/lifecycle.md
```
→ https://cn.vuejs.org/guide/essentials/lifecycle.html

Components In-Depth

```
examples/components/registration.md
```
→ https://cn.vuejs.org/guide/components/registration.html
```
examples/components/props.md
```
→ https://cn.vuejs.org/guide/components/props.html
```
examples/components/events.md
```
→ https://cn.vuejs.org/guide/components/events.html
```
examples/components/v-model.md
```
→ https://cn.vuejs.org/guide/components/v-model.html
```
examples/components/attrs.md
```
→ https://cn.vuejs.org/guide/components/attrs.html
```
examples/components/slots.md
```
→ https://cn.vuejs.org/guide/components/slots.html
```
examples/components/provide-inject.md
```
→ https://cn.vuejs.org/guide/components/provide-inject.html
```
examples/components/async.md
```
→ https://cn.vuejs.org/guide/components/async.html

Reusability

```
examples/reusability/composables.md
```
→ https://cn.vuejs.org/guide/reusability/composables.html
```
examples/reusability/custom-directives.md
```
→ https://cn.vuejs.org/guide/reusability/custom-directives.html
```
examples/reusability/plugins.md
```
→ https://cn.vuejs.org/guide/reusability/plugins.html

Built-in Components

```
examples/built-ins/transition.md
```
→ https://cn.vuejs.org/guide/built-ins/transition.html
```
examples/built-ins/transition-group.md
```
→ https://cn.vuejs.org/guide/built-ins/transition-group.html
```
examples/built-ins/keep-alive.md
```
→ https://cn.vuejs.org/guide/built-ins/keep-alive.html
```
examples/built-ins/teleport.md
```
→ https://cn.vuejs.org/guide/built-ins/teleport.html
```
examples/built-ins/suspense.md
```
→ https://cn.vuejs.org/guide/built-ins/suspense.html

Scaling Up

```
examples/scaling-up/sfc.md
```
→ https://cn.vuejs.org/guide/scaling-up/sfc.html
```
examples/scaling-up/tooling.md
```
→ https://cn.vuejs.org/guide/scaling-up/tooling.html
```
examples/scaling-up/routing.md
```
→ https://cn.vuejs.org/guide/scaling-up/routing.html
```
examples/scaling-up/state-management.md
```
→ https://cn.vuejs.org/guide/scaling-up/state-management.html
```
examples/scaling-up/testing.md
```
→ https://cn.vuejs.org/guide/scaling-up/testing.html
```
examples/scaling-up/ssr.md
```
→ https://cn.vuejs.org/guide/scaling-up/ssr.html

Best Practices

```
examples/best-practices/production-deployment.md
```
→ https://cn.vuejs.org/guide/best-practices/production-deployment.html
```
examples/best-practices/performance.md
```
→ https://cn.vuejs.org/guide/best-practices/performance.html
```
examples/best-practices/accessibility.md
```
→ https://cn.vuejs.org/guide/best-practices/accessibility.html
```
examples/best-practices/security.md
```
→ https://cn.vuejs.org/guide/best-practices/security.html

TypeScript

```
examples/typescript/overview.md
```
→ https://cn.vuejs.org/guide/typescript/overview.html
```
examples/typescript/composition-api.md
```
→ https://cn.vuejs.org/guide/typescript/composition-api.html
```
examples/typescript/options-api.md
```
→ https://cn.vuejs.org/guide/typescript/options-api.html

Extra Topics

```
examples/extras/ways-of-using-vue.md
```
→ https://cn.vuejs.org/guide/extras/ways-of-using-vue.html
```
examples/extras/composition-api-faq.md
```
→ https://cn.vuejs.org/guide/extras/composition-api-faq.html
```
examples/extras/reactivity-in-depth.md
```
→ https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
```
examples/extras/rendering-mechanism.md
```
→ https://cn.vuejs.org/guide/extras/rendering-mechanism.html
```
examples/extras/render-function.md
```
→ https://cn.vuejs.org/guide/extras/render-function.html
```
examples/extras/web-components.md
```
→ https://cn.vuejs.org/guide/extras/web-components.html
```
examples/extras/animation.md
```
→ https://cn.vuejs.org/guide/extras/animation.html

入门篇

```
examples/getting-started/introduction.md
```
→ https://cn.vuejs.org/guide/introduction.html
```
examples/getting-started/quick-start.md
```
→ https://cn.vuejs.org/guide/quick-start.html

核心概念

```
examples/essentials/application.md
```
→ https://cn.vuejs.org/guide/essentials/application.html
```
examples/essentials/template-syntax.md
```
→ https://cn.vuejs.org/guide/essentials/template-syntax.html
```
examples/essentials/reactivity-fundamentals.md
```
→ https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html
```
examples/essentials/computed.md
```
→ https://cn.vuejs.org/guide/essentials/computed.html
```
examples/essentials/class-and-style.md
```
→ https://cn.vuejs.org/guide/essentials/class-and-style.html
```
examples/essentials/conditional.md
```
→ https://cn.vuejs.org/guide/essentials/conditional.html
```
examples/essentials/list.md
```
→ https://cn.vuejs.org/guide/essentials/list.html
```
examples/essentials/event-handling.md
```
→ https://cn.vuejs.org/guide/essentials/event-handling.html
```
examples/essentials/forms.md
```
→ https://cn.vuejs.org/guide/essentials/forms.html
```
examples/essentials/watchers.md
```
→ https://cn.vuejs.org/guide/essentials/watchers.html
```
examples/essentials/template-refs.md
```
→ https://cn.vuejs.org/guide/essentials/template-refs.html
```
examples/essentials/component-basics.md
```
→ https://cn.vuejs.org/guide/essentials/component-basics.html
```
examples/essentials/lifecycle.md
```
→ https://cn.vuejs.org/guide/essentials/lifecycle.html

组件深入

```
examples/components/registration.md
```
→ https://cn.vuejs.org/guide/components/registration.html
```
examples/components/props.md
```
→ https://cn.vuejs.org/guide/components/props.html
```
examples/components/events.md
```
→ https://cn.vuejs.org/guide/components/events.html
```
examples/components/v-model.md
```
→ https://cn.vuejs.org/guide/components/v-model.html
```
examples/components/attrs.md
```
→ https://cn.vuejs.org/guide/components/attrs.html
```
examples/components/slots.md
```
→ https://cn.vuejs.org/guide/components/slots.html
```
examples/components/provide-inject.md
```
→ https://cn.vuejs.org/guide/components/provide-inject.html
```
examples/components/async.md
```
→ https://cn.vuejs.org/guide/components/async.html

可复用性

```
examples/reusability/composables.md
```
→ https://cn.vuejs.org/guide/reusability/composables.html
```
examples/reusability/custom-directives.md
```
→ https://cn.vuejs.org/guide/reusability/custom-directives.html
```
examples/reusability/plugins.md
```
→ https://cn.vuejs.org/guide/reusability/plugins.html

内置组件

```
examples/built-ins/transition.md
```
→ https://cn.vuejs.org/guide/built-ins/transition.html
```
examples/built-ins/transition-group.md
```
→ https://cn.vuejs.org/guide/built-ins/transition-group.html
```
examples/built-ins/keep-alive.md
```
→ https://cn.vuejs.org/guide/built-ins/keep-alive.html
```
examples/built-ins/teleport.md
```
→ https://cn.vuejs.org/guide/built-ins/teleport.html
```
examples/built-ins/suspense.md
```
→ https://cn.vuejs.org/guide/built-ins/suspense.html

规模化开发

```
examples/scaling-up/sfc.md
```
→ https://cn.vuejs.org/guide/scaling-up/sfc.html
```
examples/scaling-up/tooling.md
```
→ https://cn.vuejs.org/guide/scaling-up/tooling.html
```
examples/scaling-up/routing.md
```
→ https://cn.vuejs.org/guide/scaling-up/routing.html
```
examples/scaling-up/state-management.md
```
→ https://cn.vuejs.org/guide/scaling-up/state-management.html
```
examples/scaling-up/testing.md
```
→ https://cn.vuejs.org/guide/scaling-up/testing.html
```
examples/scaling-up/ssr.md
```
→ https://cn.vuejs.org/guide/scaling-up/ssr.html

最佳实践

```
examples/best-practices/production-deployment.md
```
→ https://cn.vuejs.org/guide/best-practices/production-deployment.html
```
examples/best-practices/performance.md
```
→ https://cn.vuejs.org/guide/best-practices/performance.html
```
examples/best-practices/accessibility.md
```
→ https://cn.vuejs.org/guide/best-practices/accessibility.html
```
examples/best-practices/security.md
```
→ https://cn.vuejs.org/guide/best-practices/security.html

TypeScript支持

```
examples/typescript/overview.md
```
→ https://cn.vuejs.org/guide/typescript/overview.html
```
examples/typescript/composition-api.md
```
→ https://cn.vuejs.org/guide/typescript/composition-api.html
```
examples/typescript/options-api.md
```
→ https://cn.vuejs.org/guide/typescript/options-api.html

进阶主题

```
examples/extras/ways-of-using-vue.md
```
→ https://cn.vuejs.org/guide/extras/ways-of-using-vue.html
```
examples/extras/composition-api-faq.md
```
→ https://cn.vuejs.org/guide/extras/composition-api-faq.html
```
examples/extras/reactivity-in-depth.md
```
→ https://cn.vuejs.org/guide/extras/reactivity-in-depth.html
```
examples/extras/rendering-mechanism.md
```
→ https://cn.vuejs.org/guide/extras/rendering-mechanism.html
```
examples/extras/render-function.md
```
→ https://cn.vuejs.org/guide/extras/render-function.html
```
examples/extras/web-components.md
```
→ https://cn.vuejs.org/guide/extras/web-components.html
```
examples/extras/animation.md
```
→ https://cn.vuejs.org/guide/extras/animation.html

API mapping (one-to-one with API pages)

API映射（与API页面一一对应）

Global API

```
api/application.md
```
→ https://cn.vuejs.org/api/application.html
```
api/general.md
```
→ https://cn.vuejs.org/api/general.html

Composition API

```
api/composition-api-setup.md
```
→ https://cn.vuejs.org/api/composition-api-setup.html
```
api/reactivity-core.md
```
→ https://cn.vuejs.org/api/reactivity-core.html
```
api/reactivity-utilities.md
```
→ https://cn.vuejs.org/api/reactivity-utilities.html
```
api/reactivity-advanced.md
```
→ https://cn.vuejs.org/api/reactivity-advanced.html
```
api/composition-api-lifecycle.md
```
→ https://cn.vuejs.org/api/composition-api-lifecycle.html
```
api/composition-api-dependency-injection.md
```
→ https://cn.vuejs.org/api/composition-api-dependency-injection.html
```
api/composition-api-helpers.md
```
→ https://cn.vuejs.org/api/composition-api-helpers.html

Options API

```
api/options-state.md
```
→ https://cn.vuejs.org/api/options-state.html
```
api/options-rendering.md
```
→ https://cn.vuejs.org/api/options-rendering.html
```
api/options-lifecycle.md
```
→ https://cn.vuejs.org/api/options-lifecycle.html
```
api/options-composition.md
```
→ https://cn.vuejs.org/api/options-composition.html
```
api/options-misc.md
```
→ https://cn.vuejs.org/api/options-misc.html
```
api/component-instance.md
```
→ https://cn.vuejs.org/api/component-instance.html

Built-ins

```
api/built-in-directives.md
```
→ https://cn.vuejs.org/api/built-in-directives.html
```
api/built-in-components.md
```
→ https://cn.vuejs.org/api/built-in-components.html
```
api/built-in-special-elements.md
```
→ https://cn.vuejs.org/api/built-in-special-elements.html
```
api/built-in-special-attributes.md
```
→ https://cn.vuejs.org/api/built-in-special-attributes.html

Single-File Component

```
api/sfc-spec.md
```
→ https://cn.vuejs.org/api/sfc-spec.html
```
api/sfc-script-setup.md
```
→ https://cn.vuejs.org/api/sfc-script-setup.html
```
api/sfc-css-features.md
```
→ https://cn.vuejs.org/api/sfc-css-features.html

Advanced APIs

```
api/custom-elements.md
```
→ https://cn.vuejs.org/api/custom-elements.html
```
api/render-function.md
```
→ https://cn.vuejs.org/api/render-function.html
```
api/ssr.md
```
→ https://cn.vuejs.org/api/ssr.html
```
api/utility-types.md
```
→ https://cn.vuejs.org/api/utility-types.html
```
api/custom-renderer.md
```
→ https://cn.vuejs.org/api/custom-renderer.html
```
api/compile-time-flags.md
```
→ https://cn.vuejs.org/api/compile-time-flags.html

全局API

```
api/application.md
```
→ https://cn.vuejs.org/api/application.html
```
api/general.md
```
→ https://cn.vuejs.org/api/general.html

组合式API

```
api/composition-api-setup.md
```
→ https://cn.vuejs.org/api/composition-api-setup.html
```
api/reactivity-core.md
```
→ https://cn.vuejs.org/api/reactivity-core.html
```
api/reactivity-utilities.md
```
→ https://cn.vuejs.org/api/reactivity-utilities.html
```
api/reactivity-advanced.md
```
→ https://cn.vuejs.org/api/reactivity-advanced.html
```
api/composition-api-lifecycle.md
```
→ https://cn.vuejs.org/api/composition-api-lifecycle.html
```
api/composition-api-dependency-injection.md
```
→ https://cn.vuejs.org/api/composition-api-dependency-injection.html
```
api/composition-api-helpers.md
```
→ https://cn.vuejs.org/api/composition-api-helpers.html

选项式API

```
api/options-state.md
```
→ https://cn.vuejs.org/api/options-state.html
```
api/options-rendering.md
```
→ https://cn.vuejs.org/api/options-rendering.html
```
api/options-lifecycle.md
```
→ https://cn.vuejs.org/api/options-lifecycle.html
```
api/options-composition.md
```
→ https://cn.vuejs.org/api/options-composition.html
```
api/options-misc.md
```
→ https://cn.vuejs.org/api/options-misc.html
```
api/component-instance.md
```
→ https://cn.vuejs.org/api/component-instance.html

内置项

```
api/built-in-directives.md
```
→ https://cn.vuejs.org/api/built-in-directives.html
```
api/built-in-components.md
```
→ https://cn.vuejs.org/api/built-in-components.html
```
api/built-in-special-elements.md
```
→ https://cn.vuejs.org/api/built-in-special-elements.html
```
api/built-in-special-attributes.md
```
→ https://cn.vuejs.org/api/built-in-special-attributes.html

单文件组件

```
api/sfc-spec.md
```
→ https://cn.vuejs.org/api/sfc-spec.html
```
api/sfc-script-setup.md
```
→ https://cn.vuejs.org/api/sfc-script-setup.html
```
api/sfc-css-features.md
```
→ https://cn.vuejs.org/api/sfc-css-features.html

高级API

```
api/custom-elements.md
```
→ https://cn.vuejs.org/api/custom-elements.html
```
api/render-function.md
```
→ https://cn.vuejs.org/api/render-function.html
```
api/ssr.md
```
→ https://cn.vuejs.org/api/ssr.html
```
api/utility-types.md
```
→ https://cn.vuejs.org/api/utility-types.html
```
api/custom-renderer.md
```
→ https://cn.vuejs.org/api/custom-renderer.html
```
api/compile-time-flags.md
```
→ https://cn.vuejs.org/api/compile-time-flags.html

Resources

资源

Guide: https://cn.vuejs.org/guide/introduction.html
API: https://cn.vuejs.org/api/

官方指南：https://cn.vuejs.org/guide/introduction.html
API参考：https://cn.vuejs.org/api/

Keywords

关键词

Vue 3, Vue.js, Composition API, Options API, reactivity, template syntax, components, directives, lifecycle, routing, state management, TypeScript

Vue 3, Vue.js, Composition API, Options API, 响应式, 模板语法, 组件, 指令, 生命周期, 路由, 状态管理, TypeScript