哈喽大家好，我是心连欣。接下来我会学习Vue的知识，依旧会努力每日更新我的学习成果，如果没更就说明学得不够多！😊😊接下来我会简单阐述一下我学的简单概念和如何创建一个Vue应用❤️❤️。在前端开发的浩瀚星河中，Vue.js 无疑是最耀眼的恒星之一。从 2014 年尤雨溪发布 Vue 1.0 的雏形，到如今 Vue 3 成为现代前端开发的事实标准，这场技术演进不仅仅是版本的迭代，更是一场关于性能、开发体验与架构哲学的深刻变革。站在 2026 年的今天回望，Vue 2 与 Vue 3 的区别，恰似燃油车与电动汽车的分野------前者奠定了交互的基石，后者则重塑了驾驶的灵魂。
当我们谈论 Vue 2 与 Vue 3 的对比时，我们实际上是在探讨两种截然不同的编程范式。Vue 2 以其 Options API 的直观性，教会了无数开发者如何通过 data、methods 和 computed 来组织逻辑，它像一位循循善诱的导师，让初学者迅速上手。然而，随着应用复杂度的指数级上升，这种基于选项的组织方式逐渐显露出"逻辑碎片化"的弊端------同一个业务功能的代码散落在不同的选项中，维护起来如同在迷宫中寻找出口。
Vue 3 的横空出世，带来了 Composition API 这一颠覆性的创新。它不再强迫我们将代码割裂成固定的选项，而是允许我们按照功能的内在逻辑，将相关的状态、计算属性和方法聚合在一起。这种基于组合的思维模式，不仅极大地提升了代码的复用性，更让 TypeScript 的类型推导如虎添翼。如果说 Vue 2 是在搭建积木，那么 Vue 3 就是在构建精密的机械钟表，每一个齿轮都严丝合缝地咬合在一起。
在深入代码之前，我们必须先铺设好通往 Vue 世界的基石------Node.js 与 npm。作为现代前端开发的"水电煤"，Node.js 提供了 JavaScript 运行时的环境，而 npm 则是我们获取依赖、管理项目的核心工具。
对于初学者而言，环境搭建往往是第一道门槛。首先，你需要从 Node.js 官网下载并安装长期支持版（LTS），这是保证稳定性的关键，以windows系统为例。安装完成后，打开终端输入
node -v和npm -v，若能看到版本号，说明环境已就绪。为了提升下载速度，建议将 npm 的源切换到国内镜像，只需一行命令：npm config set registry https://registry.npmmirror.com。这一步看似微小，却能在后续的依赖安装中为你节省大量时间。
在 Vue 2 时代，我们习惯于使用 Vue CLI 来创建项目，它基于 Webpack，功能强大但略显笨重。而在 Vue 3 时代，Vite 成为了新的宠儿。Vite 利用浏览器原生的 ES 模块支持，实现了毫秒级的服务器启动和热更新，彻底改变了开发体验。
要创建一个 Vue 3 项目，我们不再使用
vue create，而是采用更现代的npm create命令。在终端中输入npm create vue@latest（可在官网直接复制）
脚手架会引导你进行一系列交互式配置，首先我认为Vue3是非常支持TypeScript的，所以可以选择。下面我的选择如下：
随着回车键的敲击，一个结构清晰、配置现代的 Vue 3 项目便诞生了。
进入项目目录，执行
npm install安装依赖，随后运行npm run dev，你就能在浏览器中见证 Vue 3 的极速启动。安装完依赖之后，很多小伙伴出现的"明明什么都没做就报红"的现象就解决啦。
当我们真正开始编写代码时，Vue 2 与 Vue 3 的差异便跃然纸上。在 Vue 2 中，我们通过 data 函数返回一个对象来定义响应式数据，通过 methods 定义行为。这种模式简单直接，但在处理复杂逻辑时，往往会导致代码冗余。
而在 Vue 3 中，<script setup> 语法糖成为了主流。我们不再需要繁琐的导出对象，而是直接使用 import 语句引入 ref 和 reactive。ref 用于处理基本数据类型，它像一个容器，将普通值包裹起来使其具备响应式能力，我们在代码中访问它时需要通过 .value 属性。reactive 则用于处理对象，它利用 ES6 的 Proxy 对对象进行深层代理，让我们能像操作普通对象一样操作响应式数据。
下面举一个简单计数器示例：该示例展示了如何在
script setup中定义响应式数据、编写函数，并通过指令进行事件绑定和属性绑定：
显示结果如下：
这种语法的转变背后，是响应式原理的根本性重构。Vue 2 使用 Object.defineProperty 进行数据劫持，这种方式无法检测到对象属性的新增或删除，也无法原生支持 Map 和 Set 等数据结构。Vue 3 则拥抱了 Proxy，它能够拦截对象的所有操作，无论是属性的读取、设置还是删除，都能被精准捕获。这不仅解决了 Vue 2 的诸多限制，更带来了性能上的显著提升。
除了响应式原理，Vue 3 在生命周期、组件通信和模板语法上也进行了诸多优化。生命周期钩子从 this.$on 的形式转变为可导入的函数，如 onMounted 和 onUpdated，这使得逻辑组合更加灵活。在模板中，Vue 3 支持多根节点，不再强制要求包裹一个多余的 div 标签，这让 HTML 结构更加语义化和整洁。
此外，Vue 3 对 TypeScript 的原生支持也是其一大亮点。Vue 2 的类型支持往往需要额外的装饰器配置，而 Vue 3 的源码本身就是用 TypeScript 编写的，这意味着它提供了开箱即用的类型推导。在 <script setup> 中，我们可以直接使用 TypeScript 定义接口和类型，享受智能提示和类型检查带来的安全感。
从 Vue 2 到 Vue 3，不仅仅是语法的升级，更是思维的跃迁。Vue 2 教会了我们组件化开发的基础，而 Vue 3 则引领我们进入了组合式编程与类型安全的新时代。对于新项目而言，Vue 3 无疑是最佳选择，它更小的打包体积、更快的渲染速度以及更强大的生态工具，都足以支撑起企业级应用的开发需求。而对于维护中的 Vue 2 项目，理解两者的差异也能帮助我们在迁移时做出更明智的决策。
在这个技术日新月异的时代，唯有不断拥抱变化，才能在代码的海洋中乘风破浪。无论是 Vue 2 的经典沉稳，还是 Vue 3 的锐意进取，它们都是前端发展史上浓墨重彩的一笔。