Vue 项目与 API 风格

这一课你将能做到

1. 说清楚 Vue 3 在前端生态中的位置，以及它解决什么问题
2. 用 Vite 创建一个可运行的 Vue 3 项目
3. 区分组合式 API 与选项式 API，并始终使用 <script setup> 组合式写法
4. 理解单文件组件（SFC）的三段式结构

为什么要学

Vue 是目前国内使用最广泛的前端框架之一。你写的 HTML/CSS/JS 只是「静态页面」，而真实项目是「数据驱动的动态应用」——用户登录、列表刷新、表单提交、路由跳转，全靠框架帮你管理数据与视图的同步。

人话：Vue 就像你给 HTML 请了一个「管家」。你告诉管家「数据变了，页面跟着变」，剩下的脏活累活（DOM 操作、事件绑定、状态同步）全由 Vue 自动完成。

先建立图像

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">点了 {{ count }} 次</button>
</template>

浏览器渲染后：

[点了 0 次]   ← 点一下按钮
[点了 1 次]   ← 页面自动更新，不用手动改 DOM

跟着做

步骤 1：用 Vite 创建项目

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

浏览器打开 http://localhost:5173，看到欢迎页即成功。

步骤 2：认识项目结构

my-vue-app/
├─ index.html          ← 入口 HTML
├─ vite.config.js      ← Vite 配置
├─ package.json
└─ src/
   ├─ main.js          ← 应用入口，创建 Vue 实例
   ├─ App.vue          ← 根组件
   └─ components/      ← 子组件目录

步骤 3：改造 App.vue

把 src/App.vue 内容全部替换为：

<script setup>
import { ref } from 'vue'
const msg = ref('你好，Vue 3')
const count = ref(0)
function add() { count.value++ }
</script>

<template>
  <h1>{{ msg }}</h1>
  <p>当前计数：{{ count }}</p>
  <button @click="add">+1</button>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

保存后页面自动热更新。

步骤 4：理解三段式结构

• <script setup>：写逻辑，声明响应式数据和方法
• <template>：写 HTML 模板，用 {{ }} 插值、@click 绑定事件
• <style scoped>：写样式，scoped 表示只作用于当前组件

步骤 5：main.js 做了什么

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

createApp 创建应用实例，mount('#app') 把它挂到 index.html 的 <div id="app"></div> 上。

讲清楚要点

1. 组合式 API（Composition API）：把相关逻辑按功能组织在一起，而不是按选项类型（data、methods、computed）分散。Vue 3 推荐写法。
2. <script setup>：组合式 API 的语法糖，模板里可直接使用顶层变量，无需 return。
3. ref()：创建响应式数据。JS 中读写用 .value，模板中自动解包。
4. SFC（Single File Component）：一个 .vue 文件包含模板、逻辑、样式，是 Vue 组件的基本单元。
5. Vite：新一代构建工具，启动快、热更新快，Vue 3 官方推荐。

你可能会懵的地方

• ref 和 reactive 有什么区别？ ref 包装任意值，通过 .value 访问；reactive 只包装对象，直接访问属性。<script setup> 里优先用 ref，更灵活。

• 为什么模板里不用写 .value？ Vue 在编译模板时自动对顶层 ref 解包，这是语法糖。

• 选项式 API 还能用吗？ 能，Vue 3 完全兼容。但新代码统一用组合式 + <script setup>，更利于逻辑复用和 TypeScript 支持。

• 必须装 Node.js 吗？ 必须。Vue 3 官方开发基于 Node 生态，Vite 也是 Node 工具。

• Vue 和 React、Angular 怎么选？ Vue 上手最快、文档中文友好、国内岗位多；React 生态最大；Angular 适合超大型企业级。初学者先 Vue 没问题。

错法对照

错法	问题	正解
在 <script setup> 里写 export default { data() {...} }	混用选项式，语法冲突	只用 import { ref } from 'vue' 声明
JS 里直接 count++ 忘了 .value	改的是 ref 对象本身，不是值	写 count.value++
模板里写 count.value	模板自动解包，多此一举	直接 {{ count }}
把 src/App.vue 里的 <template> 删了	页面空白	三段式缺一不可（<style> 可省）
用 npm run build 当开发命令	构建产物用于部署，不是开发	开发用 npm run dev

卡点急救

1. 端口被占用：Vite 自动换端口，看终端输出 Local: http://localhost:xxxx。
2. 页面空白：F12 看 Console 报错，多半是 App.vue 语法错误。
3. 修改不生效：确认保存的是 src/App.vue，不是 index.html；确认终端没有报错。

面试常问

• Vue 2 和 Vue 3 最大的区别？ Vue 3 默认组合式 API、性能更好（Proxy 响应式）、包体积更小、更好的 TypeScript 支持。

• 什么是响应式？ 数据变化时视图自动更新。Vue 3 用 Proxy 实现，Vue 2 用 Object.defineProperty。

• Vite 比 Webpack 快在哪？ 开发环境基于浏览器原生 ESM，无需打包；生产环境用 Rollup 打包。

自测三问

1. 一个 Vue SFC 由哪三部分组成？各自作用？
2. ref 声明的变量在 JS 中怎么修改值？在模板中怎么读取？
3. 组合式 API 和选项式 API 的核心区别是什么？

小结一句话

Vue 3 用组合式 API + <script setup> 把「数据变 → 视图变」自动化，Vite 让你秒级启动项目，这是现代前端开发的起点。

延伸

• Vue 3 官方文档
• 下一课：模板与指令——插值、条件渲染、列表渲染。