Vite

导读：你还在手动操控 DOM 吗？ 如果你是从 jQuery、Zepto 那个年代过来的前端开发者，一定有过这样的经历：数据变了，你要手动去找元素、改文本、加 class、绑事件——改一处牵全身，项目越大越像一团乱麻。 Vue3 的核心理念就一句话：你只管写数据，页面会自动更新。 这叫"响应式编程"——当你的 JavaScript 变量发生变化时，Vue 自动帮你把页面对应的部分刷新掉。你不需要再操心"哪个 DOM 需要改"。 此外，Vue3 引入了组合式 API（Composition API），核心语法是 <script setup>。它让你按"功能"组织代码（而不是按"生命周期钩子"拆散），代码更紧凑、更容易复用。 这篇教程会带着你从头搭建一个 Vue3 项目，一步步了解关键概念，最后做一个完整的 TodoList 小应用收尾。全程无废话，只讲你需要用的。 前置知识：基本的 HTML、CSS、JavaScript（ES6 箭头函数和解构赋值就够了）。如果你会用 npm 装过一个工具包，那就足够了。 一、Vue3 对比 jQuery：一张表说清楚 维度 jQuery 时代（传统写法） Vue3 组合式 API 更新页面 $('#box').text(newData) 手动操作 DOM 变量变了，{{ data }} 自动更新 事件绑定 .on('click', handler) 到处散布 @click="handleClick" 写在模板里 组件化 靠约定或第三方库（如 React 风格封装） 内置 .vue 单文件组件，开箱即用 状态管理 全局变量 / $bus 事件总线 ref / reactive 响应式系统 + Pinia 构建方式 CDN 直接引入即可 推荐 Vite 脚手架（开发快、打包小） jQuery 不是不好——它是那个时代的最佳实践。但在今天的项目复杂度面前，手动操作 DOM 成了最大的维护负担。Vue3 的思路是：声明式地描述"数据长什么样"，让框架负责"DOM 怎么变"。 ...