第一章：Vue 基础与模板语法

核心目标：从零开始掌握 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）包装成一个响应式对象。

vue 复制代码

<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）。

ts 复制代码

const user = reactive({
  name: '张三',
  meta: { age: 25 }
})
// 无需 .value
user.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 操作。

html 复制代码

<li v-for="item in list" :key="item.id">{{ item.text }}</li>

1.4 计算属性 vs 侦听器：高性能的秘诀

1.4.1 computed (计算属性)

核心特性：缓存。只有当依赖的响应式数据发生变化时，计算属性才会重新求值。

ts 复制代码

const fullName = computed(() => {
  console.log('计算中...') // 只有名字变化才会打印
  return firstName.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 全栈开发实战专栏

📦 项目源码资源 ：点击下载项目源码