核心目标：从零开始掌握 Vue 3 的设计理念，深入理解响应式系统、指令系统及组件生命周期，建立现代前端开发的心智模型。
📋 本章核心知识点
| 知识点 | 说明 | 难度 |
|---|---|---|
| 设计理念 | 声明式渲染与组件化 | ⭐ |
| 响应式系统 | ref与reactive的底层原理 | ⭐⭐⭐ |
| 模板指令 | v-if,v-for,v-model等常用指令 | ⭐ |
| 计算属性 | computed的缓存机制与使用场景 | ⭐⭐ |
| 侦听器 | watch与watchEffect的技术选择 | ⭐⭐⭐ |
| 生命周期 | 组件从创建到销毁的完整过程 | ⭐⭐ |
1.1 Vue 3 设计理念：现代 Web 的基石
1.1.1 声明式 vs 命令式
- 命令式（传统 jQuery 等）：手动操作 DOM。例如：“找到 id 为 app 的 div，设置其文字为 Hello”。
- 声明式（Vue）：描述状态与 UI 的映射关系。例如：“当
message是 Hello 时，UI 应该显示 Hello”。Vue 会自动处理 DOM 更新。
1.1.2 组合式 API (Composition API)
Vue 3 引入了组合式 API，彻底解决了 Vue 2 Options API 在处理复杂逻辑时代码“东拼西凑”的问题。它允许我们将相关的逻辑组织在一起，方便复用。
1.2 响应式动力：基于 Proxy 的魔法
Vue 3 的响应式系统是其核心。它能让数据与视图保持同步。
1.2.1 ref —— 基本值的“包装盒”
ref将一个原始类型（如 string, number）包装成一个响应式对象。
<script setup lang="ts"> import { ref } from 'vue' const count = ref(0) // 包装 // JS 中必须通过 .value 访问 console.log(count.value) function increment() { count.value++ } </script> <template> <!-- 模板中会自动解包，不需要 .value --> <button @click="increment">{{ count }}</button> </template>1.2.2 reactive —— 对象与数组的代理
reactive直接返回一个对象的响应式代理（Proxy）。
constuser=reactive({name:'张三',meta:{age:25}})// 无需 .valueuser.name='李四'🧠 深度解析：Proxy vs Object.defineProperty
- Vue 2 (
defineProperty)：需要递归遍历对象属性，无法检测到属性的新增或删除，无法原生支持数组索引修改。 - Vue 3 (
Proxy)：拦截整个对象的操作。性能更好，原生支持增删属性，完美支持数组。
1.3 指令系统：HTML 的增强
1.3.1 条件渲染：v-if vs v-show
- v-if：“真销毁/重建”。如果初始值为假，则不渲染。适用于切换不频繁的场景。
- v-show：“仅切换 CSS”。元素始终在 DOM 中，只是切换
display: none。适用于频繁切换。
1.3.2 列表渲染：v-for 与 :key
渲染数组时，务必绑定:key。这能帮助 Vue 的 Diff 算法高效定位节点，避免不必要的 DOM 操作。
<liv-for="item in list":key="item.id">{{ item.text }}</li>1.4 计算属性 vs 侦听器：高性能的秘诀
1.4.1 computed (计算属性)
核心特性：缓存。只有当依赖的响应式数据发生变化时，计算属性才会重新求值。
constfullName=computed(()=>{console.log('计算中...')// 只有名字变化才会打印returnfirstName.value+lastName.value})1.4.2 watch vs watchEffect
- watch：手动指定监听源。能拿到新旧值，支持懒执行。适用于处理异步操作（如发请求）。
- watchEffect：自动追踪依赖。立即执行一次，逻辑更简洁，但不提供旧值。
1.5 组件生命周期：生、老、病、死
| 阶段 | 钩子函数 | 经典用途 |
|---|---|---|
| 创建后 | onMounted | 发起网络请求、操作 DOM、第三方库初始化 |
| 更新前/后 | onUpdated | 极少用到，逻辑建议放数据侧 |
| 销毁前 | onBeforeUnmount | 清理：清除定时器、取消全局事件监听 |
[!CAUTION]
忘记在onBeforeUnmount中清理定时器是导致 Vue 应用内存泄漏最常见的原因。
📌 章节实战建议
- 优先使用 ref：即使是对象，
ref也比reactive更具一致性（解构不会丢失响应式）。 - 避免模板逻辑过重：复杂的表达式一律写成
computed。 - 合理利用 Transition：Vue 内置的过渡系统能大幅提升用户体验。
🔗专栏链接：Vue 3 全栈开发实战专栏
📦项目源码资源：点击下载项目源码
----Mat容器)