Vue 入门

Vue3 简介

Vue 是一套用于构建用户界面的渐进式框架，Vue3 在性能、TypeScript 支持和组合式 API 方面有了显著提升。

Vue3 的核心改进：

• 性能更好，渲染速度更快
• 打包体积更小
• 组合式 API，代码逻辑更清晰灵活
• 更好的 TypeScript 类型推断
• 模板语法更灵活

Vite 构建工具

Vite 是什么

Vite 是新一代前端构建工具，基于原生 ES 模块，提供极速的开发服务器启动和热更新。

Vite 与 Webpack 对比

特性	Vite	Webpack
开发服务器启动	极快（秒级）	较慢
热更新速度	即时	随项目规模递减
模块化	ES6 模块	CommonJS / ES6
配置复杂度	简单	较复杂
生态成熟度	快速增长	非常成熟

创建 Vue3 项目

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

项目目录结构

• .vscode/ — VS Code 工作区配置
• src/ — 源代码目录
• public/ — 静态资源目录
• node_modules/ — 依赖包
• package.json — 项目配置文件
• vite.config.js — Vite 配置文件
• index.html — 项目入口 HTML
• src/main.js — 应用入口
• src/App.vue — 根组件

数据绑定

Vue 提供多种数据绑定方式：

• 文本插值 — 在模板中输出变量值
• 属性绑定 v-bind 或 : — 动态绑定 HTML 属性
• 事件绑定 v-on 或 @ — 监听 DOM 事件
• 双向绑定 v-model — 表单输入与数据同步

条件渲染

• v-if / v-else-if / v-else — 条件为真时渲染元素，为假时销毁
• v-show — 始终渲染，通过 CSS display 切换显示/隐藏

选择建议：频繁切换使用 v-show，条件很少改变使用 v-if。

v-text 与 v-html

• v-text — 更新元素的文本内容（等同于 ）
• v-html — 更新元素的 innerHTML，注意 XSS 安全风险

计算属性与侦听器

• computed — 基于响应式数据计算派生值，自动缓存
• watch — 侦听数据变化并执行副作用操作

组合式 API

Vue3 推荐使用组合式 API（<script setup>），在 setup 中组合逻辑：

• setup 中不能使用 this，因为组件实例尚未初始化
• 通过 ref、reactive 定义响应式数据
• 通过 computed、watch 处理计算与侦听逻辑