JavaScript基础课程二十一、前端框架入门（Vue3 组合式 API）

Vue3组合式API核心入门课

本课作为前端框架入门核心课，聚焦Vue3组合式API，从理念、语法到实战全方位讲解。Vue3凭借数据驱动、声明式渲染的特性，彻底简化原生DOM操作，让开发更聚焦业务逻辑。组合式API作为Vue3主推方案，解决了复杂项目逻辑分散的问题，代码更易维护、复用。课程通过单词管理实战案例，串联ref/reactive响应式、模板语法、事件绑定、列表渲染等核心知识点，结合Vite快速搭建项目，打通工程化到框架开发的最后一环。掌握本课内容，不仅能快速上手Vue3基础开发，更是后续学习Vue组件化、路由、工程化项目的关键，是前端从原生迈向框架开发的重要转折点。

一、课程学习目的

理解Vue框架的核心优势，搞懂声明式渲染 、数据驱动两大核心理念，告别原生DOM操作。
掌握Vue3组合式API（Composition API）基础语法，区分组合式与选项式API的差异。
熟练使用ref、reactive定义响应式数据，实现数据与视图的自动同步。
学会事件绑定、插值表达式、方法定义、数据渲染等基础操作，搭建简单Vue页面。
结合Vite工程化搭建Vue3项目，为后续深入学习Vue组件、路由、状态管理奠定基础。

二、为什么要学习前端框架，它与原生JavaScript的关系

2.1 学习Vue的理由

入门门槛极低，基于原生HTML/CSS/JS，零基础也能快速上手，学习成本远低于React、Angular。
国内就业市场广阔，互联网企业使用率第一，岗位数量多，求职竞争力强。
生态完整成熟，路由、状态管理、组件库、跨端方案一应俱全，开发效率极高。
渐进式框架灵活度高，可用于小型页面，也能支撑大型企业项目，适配全场景开发。
中文资源丰富，文档、教程、社区完善，遇到问题极易解决。

2.2 原生JS写前端，适合极小场景

原生JavaScript（纯JS）开发前端，从技术底层来说，所有前端框架、库最终都会被编译或解析成原生JS代码运行在浏览器中。

简单的静态页面、小功能模块（比如表单校验、按钮交互、轮播图），用原生JS手写完全够用，甚至更轻量，不需要引入额外依赖，加载速度更快。

但一旦项目规模扩大、功能变复杂，纯原生JS开发就会暴露出海量问题，这也是前端框架应运而生的根本原因------框架是为了解决原生开发的效率、维护性、扩展性难题，而非替代原生JS。

2.3 原生JS开发复杂项目的致命痛点

2.3.1 DOM操作繁琐低效，极易出错

原生JS实现视图更新，需要手动获取DOM节点、判断节点状态、拼接HTML、绑定事件、移除旧节点，步骤极其繁琐。

比如更新列表数据，需要先清空容器、循环遍历数据、创建DOM元素、追加到页面，数据量大时还容易出现内存泄漏、节点重复、事件冲突等问题。而且多人协作时，每个人操作DOM的习惯不同，代码极易混乱。

2.3.2 无统一代码规范，维护成本爆炸

原生JS没有强制的代码结构、模块化规范，小项目里代码可以随意堆砌，一旦涉及多人协作、迭代功能，很快就会变成"面条代码""回调地狱"。

变量污染、全局冲突、逻辑耦合严重，后期改一个小功能可能牵一发而动全身，排查bug耗时极长，老项目接手难度极大。

2.3.3 重复造轮子，开发效率极低

前端开发有大量通用场景：数据响应式更新、组件复用、路由跳转、状态管理、跨端适配、异步请求处理等。

纯原生开发需要手动实现这些通用逻辑，每个项目都要重新写一遍，不仅耗时耗力，还难以保证代码质量和兼容性；而框架已经把这些通用能力封装好，直接调用即可，大幅缩短开发周期。

2.3.4 响应式逻辑手写难度大，视图与数据脱节

原生JS中数据和视图是分离的，数据变化后必须手动更新DOM，一旦业务逻辑复杂，很容易出现数据和视图不一致的问题。

比如表单输入、列表筛选、弹窗联动等场景，手动同步数据和视图的代码量巨大，且容错率极低。

2.3.5 大型项目难以管控，性能优化无标准

中大型项目涉及大量组件嵌套、状态共享、异步数据流，原生JS没有成熟的解决方案，容易出现性能瓶颈（比如频繁DOM重绘、冗余请求）。

性能优化全靠开发者经验，没有标准化方案，项目越大越难把控稳定性和运行效率。

2.4 前端框架的核心价值：解决原生痛点，规范开发流程

框架本质是封装好的最佳实践集合，帮开发者规避原生坑，聚焦业务逻辑而非底层细节，主流框架（Vue/React/Angular）的共性优势如下：

2.4.1 声明式开发，聚焦业务而非细节

框架采用声明式语法，只需描述"页面想要什么效果"，无需关心"怎么实现DOM操作"。比如Vue的模板语法、React的JSX，数据变化后框架自动同步视图，彻底解放手动DOM操作，代码更简洁易懂。

2.4.2 组件化复用，拆分复杂项目

框架强制推行组件化开发，把页面拆分成独立、可复用的模块（按钮、表单、列表、弹窗），组件内逻辑封闭、互不干扰，既方便复用，又便于单独维护和测试，大幅提升协作效率。

2.4.3 统一开发规范，降低协作成本

框架有固定的代码结构、生命周期、数据流规范，不管是新手还是资深开发者，都能遵循同一套标准写代码，避免风格混乱。后续迭代、项目交接、bug排查都更高效。

2.4.4 内置完善生态，无需重复造轮

框架配套有成熟的工具链：路由（Vue-Router/React-Router）、状态管理（Pinia/Redux）、UI组件库、构建工具（Vite/Webpack）、调试插件等，开箱即用，覆盖开发、测试、部署全流程。

2.4.5 内置性能优化，降低开发门槛

框架底层做了大量性能优化：虚拟DOM、diff算法、按需加载、懒渲染、缓存机制等，开发者无需精通底层原理，就能写出高性能代码，避免手动操作DOM导致的性能问题。

2.4.6 适配复杂场景，支撑大型项目

针对SPA（单页应用）、SSR（服务端渲染）、跨端开发、微前端等复杂场景，框架都有成熟解决方案，这是原生JS很难快速实现的。

2.5 简单项目用原生，复杂项目用框架，才是前端开发的最优解

适合纯原生JS开发：极简静态页面、单一小功能、局部脚本、学习JS底层原理、追求极致轻量无依赖的小页面。

必须用前端框架：中后台管理系统、电商平台、SPA应用、小程序/跨端项目、多人协作项目、需要长期迭代维护的项目。

前端框架不是"必需品"，而是效率工具。学习框架的前提是吃透原生JS底层，框架只是简化开发、规范流程的手段；脱离原生基础直接学框架，很难理解底层逻辑，遇到问题也无法排查。

2.6 全球通用三大主流前端框架

这三个是企业开发、面试、工作最常用的，占据90%市场。

2.6.1 Vue（国内最火）

作者：尤雨溪（华人）
特点：易学、轻量、渐进式、中文生态好
版本：Vue3（主流）、Vue2（已停止维护）
适合：国内企业项目、快速开发、新手入门首选
代表公司：阿里、腾讯、字节、美团、京东

2.6.2 React（全球第一）

作者：Meta（Facebook）
特点：灵活、生态极强、TypeScript 友好
核心：JSX 语法、单向数据流
适合：大型复杂项目、海外/外企、跨端开发（React Native）
代表公司：Meta、Netflix、Airbnb、微软

2.6.3 Angular（企业重型）

作者：Google
特点：重型框架、全功能、TypeScript 内置
适合：超大型企业后台系统、严谨规范的团队
代表公司：Google、微软企业项目

2.7 新兴热门现代化轻量框架

追求极速、体积小、性能高，近年崛起。

2.7.1 Svelte

无虚拟DOM，编译时优化
代码极简，体积超小
适合：小型项目、组件库

2.7.2 Solid.js

写法像 React，但比 React 快很多
无虚拟DOM，高性能
适合：高性能需求项目

2.7.3 Qwik

主打极致首屏加载速度
0 水合技术
未来潜力框架

2.8 基于三大框架静态站点 / SSR 框架

它们不是新框架，而是 Vue/React 的上层增强框架，用于官网、博客、电商。

2.8.1 Vue 生态

Nuxt：Vue 官方全栈框架（SSR/SSG）
VitePress：Vue 官方文档站框架

2.8.2 React 生态

Next.js：React 官方最强框架（全球最火）
Gatsby：静态站点生成

2.9 一套代码多端运行跨端框架

2.9.1 UniApp（国内最强）

基于 Vue
一套代码：App + 小程序 + H5
国内企业跨端首选

2.9.2 Taro

支持 Vue/React
专注小程序跨端

2.9.3 React Native

基于 React
开发原生 App

2.9.4 Flutter

Google 出品
非 JS 系（Dart 语言）
高性能跨端

2.10 微前端 / 低代码相关

qiankun：国内最火微前端框架
icestark：阿里微前端
LowCode：低代码平台（如阿里飞冰、京东低代码）

三、Vue 发展史：Vue 从诞生到现在

3.1 Vue 诞生：2013--2014

作者：尤雨溪（Evan You）
起源：2013 年在 Google 工作时，为了解决 Angular 复杂、React 学习成本高的问题，开始开发轻量框架
正式发布 ：2014 年 2 月 Vue 0.11.0（Alpha 版）
定位：轻量、易学、渐进式前端框架

3.2 Vue 1.x 时代：2015

2015 年 10 月：Vue 1.0.0 正式版
特点：模板语法成熟、双向绑定、组件系统、轻量简单、上手极快
地位：前端圈开始爆红，成为中小型项目首选

3.3 Vue 2.x 黄金时代：2016--2020（最经典）

3.3.1 2016 年 9 月：Vue 2.0

重大升级：虚拟 DOM（性能大幅提升）、服务端渲染 SSR、更好的跨平台支持 Weex
底层响应式：Object.defineProperty

3.3.2 生态爆发

Vue Router / Vuex 成为标配
Element UI / iView 组件库流行
国内企业使用率第一的前端框架

3.3.3 最终版

2022 年 Vue 2.7：最后一个大版本（已停止维护）

3.4 Vue 3 新时代：2020 至今（当前主流）

3.4.1 2020 年 9 月：Vue 3.0 正式发布（代号：One Piece）

完全重写 ，革命性升级：响应式改用 Proxy（性能更强、无监听限制）、新增Composition API（组合式 API）、原生支持 TypeScript、多根节点 Fragment、按需引入、体积更小

3.4.2 2021 年：`<script setup>` 语法糖

让 Vue3 写法更简洁、更优雅，成为标准写法

3.4.3 2022 年：Vue 3.2+

稳定、生态成熟
Pinia 取代 Vuex
Vite 成为官方构建工具

3.4.4 最新版

2025--2026：Vue 3.4 / 3.5
持续优化编译、运行时性能

3.5 Vue 发展时间线

2014：Vue 诞生
2015：Vue 1.0 正式版
2016：Vue 2.0 发布（黄金时代开始）
2020：Vue 3.0 发布（全新架构）
2022：Vue 2 停止维护，Vue 3 成为官方默认版本
至今：Vue 3 是企业主流、新项目唯一选择

3.6 Vue 为什么能成功？

易学易用：HTML/CSS/JS 基础就能上手
渐进式：可大可小，适合所有项目
中文文档友好：国内生态极强
性能优秀：不断优化迭代
生态完整：路由、状态、组件库、工具链一应俱全

四、核心知识点讲解

4.1 Vue3 框架基础认知

Vue是一款轻量、高效的渐进式前端框架，主打数据驱动视图，无需手动操作DOM，修改数据即可自动更新页面，大幅提升开发效率。

Vue3是最新稳定版，主推组合式API，相比Vue2选项式API，代码聚合度更高、复用性更强，适合复杂项目开发。

4.2 组合式API 核心语法

组合式API以setup为入口，所有逻辑写在setup内部，按需引入API，实现逻辑关注点分离。

核心响应式API：

ref ：定义基础类型响应式数据（字符串、数字、布尔值），访问/修改需加.value
reactive：定义引用类型响应式数据（对象、数组），直接操作无需.value
setup：组合式API入口函数，返回数据和方法供模板使用
defineProps/defineEmits：组件通信基础（入门阶段了解即可）

4.3 Vue3 模板语法基础

插值表达式 ：{``{ 数据名 }}，将响应式数据渲染到页面
事件绑定 ：@click="方法名"，绑定点击、输入等交互事件
条件渲染 ：v-if，控制元素显示隐藏
列表渲染 ：v-for="item in list"，循环渲染数组数据

4.4 Vue3 + Vite 项目搭建流程

依托前课npm+Vite知识，直接创建Vue3模板项目，内置组合式API环境，无需手动配置，开箱即用。

五、示例程序

5.1 示例1：Vue3组合式API基础案例（单词管理器）

vue 复制代码

<!-- Vue3单文件组件（.vue） -->
<template>
  <!-- 模板区域：视图渲染 -->
  <div class="word-box">
    <h1>{{ title }}</h1>
    <!-- 插值表达式渲染数据 -->
    <input v-model="inputWord" placeholder="请输入单词" />
    <button @click="addWord">添加单词</button>

    <!-- 列表渲染 -->
    <ul>
      <li v-for="(item, index) in wordList" :key="index">
        {{ item.en }} - {{ item.cn }}
        <button @click="delWord(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
// 组合式API入口，直接在setup语法糖下编写逻辑
import { ref, reactive } from 'vue'

// 1. ref定义基础类型响应式数据
const title = ref('Vue3单词管理器')
const inputWord = ref('')

// 2. reactive定义引用类型响应式数据
const wordList = reactive([
  { en: 'apple', cn: '苹果' },
  { en: 'banana', cn: '香蕉' }
])

// 3. 定义方法：添加单词
const addWord = () => {
  if (!inputWord.value) return
  wordList.push({ en: inputWord.value, cn: '待翻译' })
  // 清空输入框
  inputWord.value = ''
}

// 4. 定义方法：删除单词
const delWord = (index) => {
  wordList.splice(index, 1)
}
</script>

<style scoped>
/* 组件私有样式 */
.word-box { max-width: 600px; margin: 20px auto; padding: 20px; }
input { padding: 8px; margin-right: 10px; }
button { padding: 8px 12px; cursor: pointer; }
li { margin: 8px 0; }
</style>

5.2 示例2：Vite创建Vue3项目命令

bash 复制代码

# 1. 创建Vite项目
npm create vite@latest

# 2. 配置项
# 项目名：vue3-word-project
# 框架选择：Vue
# 语言选择：JavaScript

# 3. 进入项目、安装依赖、启动
cd vue3-word-project
npm install
npm run dev

六、掌握技巧与方法

基础类型数据用ref，对象/数组用reactive，按需选择响应式API。
script setup是Vue3语法糖，简化组合式API写法，无需return数据和方法。
v-model实现双向绑定，输入框数据与变量自动同步，无需手动获取DOM值。
v-for必须绑定:key，提升Vue渲染效率，key值需唯一。
响应式数据修改后，Vue自动更新视图，彻底告别document.querySelector等DOM操作。
调试时在控制台查看组件实例，观察响应式数据变化，排查渲染问题。

七、课后作业

7.1 基础作业

用Vite创建Vue3项目，启动并运行默认页面，熟悉项目结构。
使用ref定义标题、描述变量，通过插值表达式渲染到页面。
绑定点击事件，点击按钮修改变量值，观察视图自动更新。

7.2 进阶作业

使用reactive定义单词数组，通过v-for循环渲染列表。
实现添加、删除单词的功能，搭配v-model双向绑定输入框。
添加v-if判断，无数据时显示"暂无单词"提示。

7.3 实战作业

搭建Vue3单词管理页面，整合响应式数据、事件绑定、列表渲染、条件渲染，实现增删功能，编写规范注释，纳入Git版本管理。

八、上一课：代码规范与 Git 版本控制实战作业代码

8.1 完整实战代码（规范版+Git配套文件）

8.1.1 项目结构（规范工程化结构）

Plain 复制代码

code-git-demo/
├── .gitignore       # Git忽略文件配置
├── package.json     # npm依赖+脚本
├── index.html       # 页面入口
└── src/
    ├── main.js      # 规范主逻辑
    └── utils.js     # 规范工具模块

8.1.2 .gitignore（Git忽略配置）

Plain 复制代码

# 依赖目录
node_modules/
# 打包目录
dist/
# 日志文件
*.log
# 编辑器配置
.idea/
.vscode/

8.1.3 package.json（规范配置）

Plain 复制代码

{
  "name": "code-git-demo",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "lint": "eslint src/**/*.js",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^5.0.0",
    "eslint": "^8.50.0"
  }
}

8.1.4 src/utils.js（规范工具模块）

Plain 复制代码

/**
 * 渲染单词列表到页面
 * @param {string} selector - 挂载节点选择器
 * @param {Array} wordList - 单词数组
 */
export function renderWordList(selector, wordList) {
  const dom = document.querySelector(selector)
  if (!dom) return

  let html = '<h2>单词列表</h2><ul>'
  wordList.forEach(item => {
    html += `<li>${item.en} - ${item.cn}</li>`
  })
  html += '</ul>'
  dom.innerHTML = html
}

8.1.5 src/main.js（规范主逻辑）

Plain 复制代码

import { renderWordList } from './utils.js'

// 常量：全大写+下划线
const WORD_LIST = [
  { en: 'apple', cn: '苹果' },
  { en: 'orange', cn: '橙子' },
  { en: 'grape', cn: '葡萄' }
]

/**
 * 页面初始化函数
 */
async function initPage() {
  try {
    // 渲染单词列表
    renderWordList('#app', WORD_LIST)
    console.log('页面初始化成功')
  } catch (error) {
    console.error('页面初始化失败：', error)
  }
}

// 执行初始化
initPage()

8.1.6 index.html（页面入口）

Plain 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>代码规范+Git实战</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

8.1.7 Git完整操作命令

Plain 复制代码

# 1. 初始化Git仓库
git init

# 2. 配置用户信息（仅首次使用）
git config user.name "你的名字"
git config user.email "你的邮箱"

# 3. 添加所有文件到暂存区
git add .

# 4. 规范提交
git commit -m "feat: 初始化项目，编写规范单词展示代码"
git commit -m "chore: 配置.gitignore和ESLint，规范代码格式"

# 5. 查看提交历史
git log

# 6. 查看代码状态
git status

8.2 代码功能说明

本实战代码整合代码规范、ESLint校验、Git版本控制三大核心知识点，基于Vite+原生JS搭建单词展示项目，全程遵循JS规范：采用语义化命名、标准缩进、规范注释，集成ESLint自动校验代码风格；同时包含完整Git操作流程，实现项目初始化、代码规范改造、暂存、提交、日志查看全流程。代码可直接运行，搭配规范校验脚本，能直观检测不规范代码，演示企业级开发中"规范编写+版本管理"的标准流程，帮助养成合规编码习惯，适配团队协作开发。

8.3 注意事项

执行Git命令前，需先安装Git并配置用户名、邮箱，避免提交权限报错。
代码命名严格遵循小驼峰（变量/函数）、全大写常量、语义化原则，禁用无意义命名。
ESLint校验报错时，需按提示修正代码，禁止跳过规范校验直接提交。
Git提交信息需清晰明了，格式为"类型: 描述"，如"feat: 新增单词列表""fix: 修复命名规范"。
禁止提交node_modules、dist等冗余文件，需配置.gitignore文件过滤。
每次提交前执行git status，确认修改文件无误后再暂存、提交。
规范注释需覆盖函数、复杂逻辑，生产环境清除无用console打印。

8.4 作业验收标准

代码完全符合规范：命名、缩进、注释、语法无违规，ESLint校验无报错。
Git流程完整：初始化、暂存、提交、日志查看均执行成功，提交信息规范。
.gitignore配置生效，未提交冗余文件，项目结构清晰。
项目可正常启动运行，代码可读性强，符合企业开发规范。

课程回顾

本文是Vue3组合式API核心入门课件，聚焦前端框架进阶核心，旨在帮助开发者从原生JS迈向Vue框架开发，破解复杂项目代码维护难题。课程先剖析前端框架与原生JS的差异，点明Vue易学、就业广、生态全的优势，梳理Vue从诞生到Vue3主流版本的发展历程，明确Vue3为当前企业首选。

核心讲解Vue3组合式API基础语法，重点拆解ref、reactive响应式API、模板语法及Vite项目搭建流程，搭配单词管理器实战案例，串联响应式数据、事件绑定、列表渲染等实操知识点。同时梳理代码规范与Git版本控制要点，配套分层课后作业，兼顾基础夯实与实战提升。

课程全程贴合企业开发场景，帮学习者掌握声明式渲染、数据驱动核心理念，养成规范编码习惯，为后续Vue组件化、路由等进阶学习筑牢根基，是前端框架入门的关键课程。

JavaScript基础课程二十一、前端框架入门（Vue3 组合式 API）

Vue3组合式API核心入门课

一、课程学习目的

二、为什么要学习前端框架，它与原生JavaScript的关系

2.1 学习Vue的理由

2.2 原生JS写前端，适合极小场景

2.3 原生JS开发复杂项目的致命痛点

2.3.1 DOM操作繁琐低效，极易出错

2.3.2 无统一代码规范，维护成本爆炸

2.3.3 重复造轮子，开发效率极低

2.3.4 响应式逻辑手写难度大，视图与数据脱节

2.3.5 大型项目难以管控，性能优化无标准

2.4 前端框架的核心价值：解决原生痛点，规范开发流程

2.4.1 声明式开发，聚焦业务而非细节

2.4.2 组件化复用，拆分复杂项目

2.4.3 统一开发规范，降低协作成本

2.4.4 内置完善生态，无需重复造轮

2.4.5 内置性能优化，降低开发门槛

2.4.6 适配复杂场景，支撑大型项目

2.5 简单项目用原生，复杂项目用框架，才是前端开发的最优解

2.6 全球通用三大主流前端框架

2.6.1 Vue（国内最火）

2.6.2 React（全球第一）

2.6.3 Angular（企业重型）

2.7 新兴热门现代化轻量框架

2.7.1 Svelte

2.7.2 Solid.js

2.7.3 Qwik

2.8 基于三大框架静态站点 / SSR 框架

2.8.1 Vue 生态

2.8.2 React 生态

2.9 一套代码多端运行跨端框架

2.9.1 UniApp（国内最强）

2.9.2 Taro

2.9.3 React Native

2.9.4 Flutter

2.10 微前端 / 低代码 相关

三、Vue 发展史：Vue 从诞生到现在

3.1 Vue 诞生：2013--2014

3.2 Vue 1.x 时代：2015

3.3 Vue 2.x 黄金时代：2016--2020（最经典）

3.3.1 2016 年 9 月：Vue 2.0

3.3.2 生态爆发

3.3.3 最终版

3.4 Vue 3 新时代：2020 至今（当前主流）

3.4.1 2020 年 9 月：Vue 3.0 正式发布（代号：One Piece）

3.4.2 2021 年：<script setup> 语法糖

3.4.3 2022 年：Vue 3.2+

3.4.4 最新版

3.5 Vue 发展时间线

3.6 Vue 为什么能成功？

四、核心知识点讲解

4.1 Vue3 框架基础认知

4.2 组合式API 核心语法

4.3 Vue3 模板语法基础

4.4 Vue3 + Vite 项目搭建流程

五、示例程序

5.1 示例1：Vue3组合式API基础案例（单词管理器）

5.2 示例2：Vite创建Vue3项目命令

六、掌握技巧与方法

七、课后作业

7.1 基础作业

7.2 进阶作业

7.3 实战作业

八、上一课：代码规范与 Git 版本控制 实战作业代码

8.1 完整实战代码（规范版+Git配套文件）

8.1.1 项目结构（规范工程化结构）

8.1.2 .gitignore（Git忽略配置）

8.1.3 package.json（规范配置）

8.1.4 src/utils.js（规范工具模块）

8.1.5 src/main.js（规范主逻辑）

8.1.6 index.html（页面入口）

8.1.7 Git完整操作命令

8.2 代码功能说明

8.3 注意事项

8.4 作业验收标准

课程回顾

2.10 微前端 / 低代码相关

3.4.2 2021 年：`<script setup>` 语法糖

八、上一课：代码规范与 Git 版本控制实战作业代码