Vue 3 从基础到组合式 API 全解析

赵_叶紫2026-02-24 15:00

目录

  • [1.1 基础概念](#1.1 基础概念 "#11-%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5")
    • [MVVM 模式](#MVVM 模式 "#mvvm-%E6%A8%A1%E5%BC%8F")
  • [1.2 项目创建（Vite）](#1.2 项目创建（Vite） "#12-%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BAvite")
  • [1.3 模板语法](#1.3 模板语法 "#13-%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95")
  • [2. 组件开发](#2. 组件开发 "#2-%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91")
    • [2.1 组件基础](#2.1 组件基础 "#21-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80")
    • [2.2 组件通信](#2.2 组件通信 "#22-%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1")
      • [Props（父 → 子）](#Props（父 → 子） "#props%E7%88%B6--%E5%AD%90")
      • [Emits（子 → 父）](#Emits（子 → 父） "#emits%E5%AD%90--%E7%88%B6")
      • v-model（双向绑定语法糖）
      • [Provide / Inject（跨层级）](#Provide / Inject（跨层级） "#provide--inject%E8%B7%A8%E5%B1%82%E7%BA%A7")
      • Ref（父访问子实例）
    • [2.3 插槽](#2.3 插槽 "#23-%E6%8F%92%E6%A7%BD")
    • [2.4 动态组件](#2.4 动态组件 "#24-%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6")
    • [2.5 Teleport](#2.5 Teleport "#25-teleport")
    • [2.6 自定义指令](#2.6 自定义指令 "#26-%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4")
  • [3. Composition API](#3. Composition API "#3-composition-api")
    • [3.1 响应式 API](#3.1 响应式 API "#31-%E5%93%8D%E5%BA%94%E5%BC%8F-api")
    • [3.2 依赖注入（provide / inject）](#3.2 依赖注入（provide / inject） "#32-%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5provide--inject")
    • [3.3 生命周期钩子](#3.3 生命周期钩子 "#33-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90")
    • [3.4 组合式函数（Composables）](#3.4 组合式函数（Composables） "#34-%E7%BB%84%E5%90%88%E5%BC%8F%E5%87%BD%E6%95%B0composables")
    • [3.5 <script setup> 语法糖](#3.5