Vue 3.5 与组合式 API 实践
从响应式状态、组件和组合式 API 入手，理解 Vue 如何组织交互页面。
先用白话理解
它到底是什么？
Vue 帮你把页面拆成组件，并让数据变化自动更新界面。你主要描述“数据是什么”和“页面怎样显示”，Vue 负责把两者连接起来。
学习判断
现在适不适合学？
满足左侧情况可以开始；如果更符合右侧情况，先补基础通常更省时间。
- 已经掌握 JavaScript 基础，希望开始组件化开发
- 准备进入 Vue、Nuxt 或相关工作岗位
- 需要构建包含表单、列表和状态交互的 Web 应用
- 还不能独立使用函数、数组和对象完成小项目
- 尚未理解 DOM 事件和表单输入
- 只是为了记框架 API，却没有 JavaScript 基础
学习前提
开始之前先会这些
- 掌握 HTML、CSS 和 JavaScript 基础
- 理解函数、对象、数组和 ES Modules
- 知道 DOM 事件与表单输入的基本概念
核心概念
先抓住这三个重点
响应式状态
ref 和 reactive 保存会变化的数据，模板会在依赖数据更新后重新渲染相关部分。
组件通信
父组件通过 props 传入数据，子组件通过 emit 通知事件，避免组件之间随意修改彼此状态。
组合式函数
把可复用的状态和逻辑提取为 useXxx 函数，比复制生命周期和监听代码更容易维护。
最小示例
最小计数器组件
模板会自动读取 ref 的值；在脚本中访问或修改时通常使用 count.value。
Vue 3.5可以复制运行
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count += 1">点击了 {{ count }} 次</button>
</template>动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成，说明你已经开始掌握这项技术。
- 01
实现一个可筛选的任务列表
- 02
拆分父子组件并使用 props 与 emit 通信
- 03
把重复的请求或表单逻辑提取为组合式函数
初学者常见误区
- 一开始就滥用 watch，很多值应该使用 computed 推导。
- 子组件直接修改 props，破坏单向数据流。
- 把所有状态都放进一个巨大组件，没有按职责拆分。
学完后的检查清单
- 会使用 ref、computed 和基本生命周期
- 会定义 props 和 emits
- 能把重复逻辑提取成组合式函数
官方资料