Vue3 从入门到实战
Vue3 是目前 Vue 生态的主流版本，采用组合式 API（Composition API）重构核心，更轻量、更灵活、性能更优，支持 TypeScript 友好开发。以下内容涵盖 Vue3 核心语法、实战技巧和完整示例，可直接复制到博客，零基础也能快速上手。
一、快速引入（直接复制到
无需复杂构建工具，CDN 引入即可使用 Vue3，推荐生产环境用压缩版：
html
预览
<!-- 开发环境版（含调试工具，适合学习）
-->
二、核心基础：组合式 API（Vue3 精髓）
Vue3 主推组合式 API，替代 Vue2 的选项式 API，逻辑聚合更清晰，直接复制示例即可运行：
- 第一个 Vue3 应用（响应式 + 事件）
html
预览
{ { msg }}
计数：{ { count }}
- 响应式数据：ref vs reactive
Vue3 提供两种响应式方案，按需选择：
html
预览
基本类型（ref）：{ { num }}
对象类型（reactive）：
姓名：{ { user.name }}
年龄：{ { user.age }}
模板指令（Vue3 兼容 Vue2 核心指令）
html
预览
Vue3 官网
显示内容
隐藏时显示
{ { index + 1 }}. { { item }}
你输入了：{ { inputVal }}
三、核心进阶：组件化开发
组件是 Vue3 复用代码的核心，支持全局 / 局部注册，直接复制示例：
- 全局组件（全应用可用）
html
预览
- 局部组件（仅当前作用域可用）
html
预览
四、生命周期钩子（Vue3 新写法）
Vue3 生命周期钩子改为函数式调用，更贴合组合式 API 风格：
html
预览
生命周期状态：{ { status }}
五、实战示例：完整 Vue3 交互页面
直接复制以下代码，即可生成包含响应式、组件、异步请求的完整页面：
html
预览
<!DOCTYPE html>
Vue3 实战演示
<!-- 响应式计数 -->
<div class="card">
<h3>1. 响应式计数</h3>
<p>当前计数：{
{ count }}</p>
<button class="btn" @click="increment">+1</button>
<button class="btn" style="background: #666;" @click="decrement">-1</button>
</div>
<!-- 异步请求数据 -->
<div class="card">
<h3>2. 异步请求</h3>
<button class="btn" @click="fetchData">获取文章数据</button>
<div class="loading" v-if="loading">加载中...</div>
<div class="error" v-else-if="error">{
{ error }}</div>
<div v-else v-if="article">
<h4>{
{ article.title }}</h4>
<p>{
{ article.body }}</p>
</div>
</div>
<!-- 自定义组件 -->
<div class="card">
<h3>3. 自定义列表组件</h3>
<my-list-item
v-for="item in list"
:key="item.id"
:content="item.content"
:status="item.status"
></my-list-item>
</div>
六、Vue3 核心更新与避坑指南
- Vue3 vs Vue2 核心差异
特性 Vue2 Vue3
核心 API 选项式 API（data/methods） 组合式 API（setup）
响应式原理 Object.defineProperty Proxy（支持数组 / 新增属性）
生命周期 beforeCreate/created setup（替代）
组件根节点 仅支持一个根节点 支持多个根节点
性能 一般 重写虚拟 DOM，性能提升 50%+ - 常见坑点
ref 取值：模板中直接用 count，JS 中必须用 count.value；
reactive 赋值：不能直接替换对象（如 user = {}），需修改属性（user.name = "新值"）；
props 只读：子组件不能修改父组件传入的 props，需通过事件通知父组件；
生命周期：Vue3 移除 beforeCreate/created，逻辑直接写在 setup 中； - 生产环境优化
使用 .prod.js 版本的 Vue3，体积更小；
避免在模板中写复杂逻辑（如 { { list.filter(item => item.status) }}），抽离到 setup 中；
异步请求添加加载 / 错误状态，提升用户体验；
组件拆分粒度适中（单一职责），避免超大组件。
以上内容可直接复制到博客编辑器（开启 HTML 编辑模式），替换示例中的接口、样式、数据等内容，即可快速实现基于 Vue3 的交互式页面。Vue3 组合式 API 更适合复杂项目开发，掌握核心语法即可应对大部分前端开发场景。
