最新小学生学习前端vue 多插图
笔记优化
原理认识篇
Vue 基础知识
│
├── 1. Vue 简介
│ ├── 什么是 Vue
│ ├── MVVM
MVVM 是一种前端架构模式，用来解决UI 展示逻辑与业务数据逻辑高度耦合、导致代码难以维护和复用的问题。
1️⃣ 传统写法（强耦合：DOM + 逻辑混在一起）
document.getElementById("result").innerText = name;
- 传统：“我去改页面”
- MVVM：“我只改数据，页面自己变”
核心机制是：
- 数据绑定（Data Binding）
- 视图监听数据变化自动更新（Reactive）
- ViewModel 作为中间层隔离 DOM
view和viewmodel进行绑定 需要监听器监听变化，发生变化，需要更新dom
流程，数据改变，生成虚拟dom树 对比旧差异 最小化修改dom
│ ├── SPA 单页面应用
SPA 就是“网页只加载一次，后面全靠 JS 在页面里换内容”。
router.push("/home") // 不刷新页面
router.push("/detail")
SPA = 只加载一次 HTML + JS 负责路由控制 + AJAX/Fetch 拉数据 + 前端动态渲染 DOM
响应式原理（了解）
响应式原理：监听数据变化，当数据发生变化时，自动更新依赖它的页面，而无需手动操作 DOM。
Vue2 与 Vue3 区别（了解）
| 版本 | 实现方式 | 特点 |
|---|---|---|
| Vue2 | Object.defineProperty() | 只能监听已有属性 |
| Vue3 | Proxy | 可监听整个对象 |
Vue3 相比 Vue2，在响应式（Proxy）、性能优化（编译提升）、以及 API 设计（Composition API）上进行了全面升级，使代码更灵活、性能更高、可维护性更强。
项目搭建
│ ├── Node.js
│ ├── npm / pnpm
│ ├── Vite
│ ├── package.json
│ └── 项目目录结构
| 维度 | npm run dev（开发环境） | npm run build + 部署（生产环境） |
|---|---|---|
| 运行内容 | 源码项目（Vue/React） | 打包后的静态文件 |
| 是否编译 | 实时编译 | 预先编译完成 |
| 文件形式 | 模块化源码（ESM） | 压缩后的 JS/CSS/HTML |
| 是否热更新 | 有（HMR） | 无 |
| 性能 | 慢（开发用） | 快（生产优化） |
| 是否需要 Node | 必须 | 不需要（部署后可纯静态） |
| 是否有 dev server | 有（Vite/Webpack dev server） | 没有 |
| 路由处理 | dev server 处理 | nginx / 服务器处理 |
| 调试能力 | 强（source map） | 弱（压缩代码） |
| 体积 | 未压缩 | 已压缩 + tree-shaking |
| 用途 | 开发调试 | 上线运行 |
dev 是“开发编译系统”，build 后部署的是“浏览器可直接运行的静态前端应用”。
npm run dev 是前端开发用的“实时编译服务器”，而 nginx 是生产环境的“高性能静态资源服务器 + 反向代理网关”，两者定位完全不同，不能替代。
模板语法
指令
事件
数据绑定
Composition API
生命周期
create 进行获取参数，传递值
不要再mounted后面执行
例如定时器，当beforeunmount执行，就取消定时器