笔记优化原理认识篇Vue 基础知识│├── 1. Vue 简介│ ├── 什么是 Vue│ ├── MVVMMVVM 是一种前端架构模式用来解决UI 展示逻辑与业务数据逻辑高度耦合、导致代码难以维护和复用的问题。1️⃣ 传统写法强耦合DOM 逻辑混在一起document.getElementById(result).innerText name;传统“我去改页面”MVVM“我只改数据页面自己变”核心机制是数据绑定Data Binding视图监听数据变化自动更新ReactiveViewModel 作为中间层隔离 DOMview和viewmodel进行绑定 需要监听器监听变化发生变化需要更新dom流程数据改变生成虚拟dom树 对比旧差异 最小化修改dom│ ├── SPA 单页面应用SPA 就是“网页只加载一次后面全靠 JS 在页面里换内容”。router.push(/home) // 不刷新页面router.push(/detail)SPA 只加载一次 HTML JS 负责路由控制 AJAX/Fetch 拉数据 前端动态渲染 DOM响应式原理了解响应式原理监听数据变化当数据发生变化时自动更新依赖它的页面而无需手动操作 DOM。Vue2 与 Vue3 区别了解版本实现方式特点Vue2Object.defineProperty()只能监听已有属性Vue3Proxy可监听整个对象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执行就取消定时器计算属性与监听css样式Vue 组件开发