Vue 3
本栏目为 Vue 3 官方指南(Guide)的中文镜像,按官网目录完整收录,覆盖框架核心用法:应用创建、模板语法、响应式系统、组件机制、逻辑复用与内置组件。
内容源:https://cn.vuejs.org/guide/(原样收录,含全部示例代码与图示)。
快速上手
| 页面 | 说明 |
|---|---|
| 简介 | Vue 是什么、渐进式框架的核心理念 |
| 快速上手 | 通过 CDN / 构建工具 / 单文件组件开始 |
基础(Essentials)
从零讲解 Vue 的响应式数据与模板渲染:
- 创建一个应用 —
createApp、应用配置与挂载 - 模板语法 — 插值、指令、动态参数
- 响应式基础 —
ref/reactive与深层响应性 - 计算属性 —
computed派生状态 - 类与样式绑定 —
:class/:style绑定 - 条件渲染 —
v-if/v-show - 列表渲染 —
v-for与key - 事件处理 —
v-on修饰符 - 表单输入绑定 —
v-model于表单控件 - 侦听器 —
watch/watchEffect - 模板引用 —
ref获取 DOM 与组件实例 - 组件基础 — 组件的定义与使用
- 生命周期 — 组件从创建到卸载的钩子
深入组件(Components In-Depth)
- 注册 — 全局 / 局部注册、命名约定
- Props — 声明、校验与单向数据流
- 事件 —
emit与事件校验 - 组件 v-model — 组件上的
v-model与多个绑定 - 透传 Attributes —
$attrs与继承 - 插槽 — 默认插槽、具名插槽、作用域插槽
- 依赖注入 —
provide/inject跨层通信 - 异步组件 —
defineAsyncComponent与懒加载
逻辑复用(Reusability)
内置组件(Built-in Components)
- Transition — 单元素过渡动画
- TransitionGroup — 列表过渡动画
- KeepAlive — 组件缓存与激活钩子
- Teleport — 传送至其他 DOM 节点
- Suspense — 异步依赖协调
应用规模化(Scaling Up)
- 单文件组件 —
.vue文件语法、<script setup>、作用域 CSS - 工具链 — Vite、IDE 支持、浏览器开发者工具
- 路由 — Vue Router 与动态组件方案
- 状态管理 — 响应式状态、Pinia、组合式函数 store
- 测试 — 单元测试、组件测试与 E2E 策略
- 服务端渲染 (SSR) — SSR 概述、 hydration 与流式渲染
最佳实践(Best Practices)
TypeScript
- 总览 — TS 与 Vue 的集成方式与配置
- TS 与组合式 API —
ref、computed与泛型组件类型 - TS 与选项式 API —
defineComponent与选项类型推导
进阶主题(Extras)
- 使用 Vue 的多种方式 — 渐进式采用、独立脚本与自定义元素
- 组合式 API 常见问答 — 与选项式 API 的对比与迁移建议
- 深入响应式系统 — 依赖追踪、调度与信号
- 渲染机制 — 虚拟 DOM、Diff 与更新流水线
- 渲染函数 & JSX —
h()、JSX 与编译输出 - Vue 与 Web Components — 自定义元素互操作
- 动画技巧 — 基于状态与 JavaScript 的动画方案
Vue 3 API(API Reference)
子主题:Vue 3 官方 API 参考的完整镜像,与上方各 Guide 章节配套——查函数签名、组件选项、响应式 API 与类型工具请到此处。
- Vue 3 API 参考 — 应用实例、组合式 / 选项式 / 响应式 API、内置内容、单文件组件与类型工具的完整分组索引
- 官网在线版(含交互式演练场与 API 过滤):https://cn.vuejs.org/api/
- 本栏目源文件同步自官方文档仓库,构建于 VitePress。
生态与工具链(Ecosystem & Tooling)
子主题:Vue 生态与工具链的中文镜像,收录 Vue 官方指南提及的各生态项目(Router / Pinia / Vite / Vitest / VueUse)完整文档与速查,按批次补充中。
- 生态与工具链主页 — 收录状态总览与各项目入口
- 已收录:Vue Router 核心 8 页、Pinia 核心概念 8 页、Vite 精选 6 页、Vitest 精选 4 页、VueUse 2 页(开始与精选函数速查),共 28 页
- 镜像来源:https://router.vuejs.org/zh/、https://pinia.vuejs.org/zh/、https://cn.vite.dev/、https://cn.vitest.dev/、https://vueuse.org/