认识 Vue 3

讲解

Vue 是一套用于构建用户界面的渐进式框架：可以只在页面里引入一个 script 标签增强一小块交互，也可以配合路由、状态管理、构建工具搭建大型单页应用。Vue 3 于 2020 年发布，是当前的主流版本，相对于 Vue 2 它有三大升级：一是用 Proxy 重写了响应式系统，解决了 Vue 2 中「新增属性不响应」「数组下标不响应」的历史包袱；二是引入了 Composition API，让逻辑可以按「关注点」而不是按「选项」组织；三是重写了虚拟 DOM 与编译器，运行时体积更小、更新更快。

学习 Vue 3 首先要做的一个选择是：Options API 还是 Composition API？Options API 把代码按 data、methods、computed 等选项分块，简单页面很直观，但组件一大，同一个功能的代码会被切碎到各个选项里，来回滚动才能看懂。Composition API 则让你用函数组织逻辑：一个功能的所有状态、计算、监听写在一起，还能抽成可复用的组合式函数。Vue 官方对大型项目的推荐是 Composition API，本教程全程使用它，并采用 <script setup> 语法糖——这是目前社区新项目的绝对主流写法。

还需要建立的一个心智模型是「声明式渲染」。你不再手动操作 DOM，而是描述「状态到界面」的映射关系：状态变了，Vue 负责以最小代价更新界面。你写的大部分代码是在管理状态和推导状态，而不是在调用 DOM API。理解了这一点，后面的响应式、computed、watch 就都顺理成章了。

本教程共 24 章，全部示例采用 Composition API + <script setup>。每章都包含一个可以在 Node.js 里直接运行的纯逻辑示例——它用几十行普通 JavaScript 模拟 Vue 内部机制（响应式、缓存、调度），帮你看清「魔法」背后的原理；这些代码在本教程构建时被真实执行，断言全部通过才会发布。

示例

先感受 Vue 3 响应式的核心思想：数据被「代理」后，读取和修改都能被框架感知。下面这段纯 JavaScript 用 Proxy 模拟了一个最小响应式系统（在本教程构建时被真实执行）：

import assert from 'node:assert/strict';

// 一个 20 行的迷你响应式系统：读取时收集依赖，修改时触发更新
let activeEffect = null;

function reactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      if (activeEffect) activeEffect.deps.push(key);
      return obj[key];
    },
    set(obj, key, value) {
      obj[key] = value;
      for (const effect of effects) {
        if (effect.deps.includes(key)) effect.run();
      }
      return true;
    },
  });
}

const effects = [];
function effect(fn) {
  const e = { deps: [], run: fn };
  activeEffect = e;
  fn(); // 首次运行，顺便收集依赖
  activeEffect = null;
  effects.push(e);
}

const state = reactive({ count: 0 });
let rendered = '';
effect(() => {
  rendered = '当前计数: ' + state.count;
});

assert.strictEqual(rendered, '当前计数: 0');
state.count = 1; // 修改数据，「界面」自动更新
assert.strictEqual(rendered, '当前计数: 1');
state.count = 41;
state.count += 1;
assert.strictEqual(rendered, '当前计数: 42');

console.log(rendered);
console.log('数据变了，渲染函数被自动重新执行——这就是响应式');

真实的 Vue 当然复杂得多（依赖按对象+属性精细追踪、用调度器合并更新、支持嵌套对象），但核心模型就是上面这样：读取时收集依赖，写入时通知更新。对应的单文件组件长这样：

<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <button @click="count++">当前计数: {{ count }}</button>
</template>

点按钮时 count 变化，模板自动重渲染——你一行 DOM 代码都没写。后面的章节会把这套机制逐层拆开。

常见坑

• 用 Vue 2 的思维学 Vue 3：网上大量老教程是 Options API + this 写法，注意甄别发布时间和 API 风格，本教程全部使用 Composition API。
• 一上来就背 API：先建立「状态驱动视图」的心智模型，API 是用熟的不是背熟的。
• 忽视 JavaScript 基础：Vue 3 重度依赖 ES6+（解构、模块、Proxy、Promise），基础不牢建议先过一遍本站的 JavaScript 教程。
• 在模板里写复杂逻辑：模板只放简单表达式，复杂推导交给 computed，这是新手最常见的设计失误。
• 以为响应式是魔法：本章的 Proxy 示例证明它只是「读取时收集、写入时通知」，理解原理后排查问题会快得多。

小结

Vue 3 = Proxy 响应式 + Composition API + 更快的编译渲染；学习的主线是「状态驱动视图」。本教程 24 章，全程 <script setup>，所有 ```js 示例经 Node.js 真实执行验证。下一章先把开发环境搭起来。