release 包出问题，排查到最后基本都会翻到这个文件——proguard-rules.pro。规则写得对不对，直接决定线上会不会闪退。这个文件本身机制不复杂：R8 对代码做四件事——压缩、优化、混淆、预检，keep 规则就是告诉它「这几处别碰」。但「别碰」有四种说法，选错一种线上就崩。这篇把规则文件系统梳理一遍：它怎么被加载、keep 四兄弟的区别、什么必须 keep、出了事怎么用 mapping 反推。

一、规则文件在构建里扮演什么角色 ​

它长在 app/proguard-rules.pro，本身不干活——是 R8 的「配

Vite 新一代前端构建工具学习笔记，覆盖快速上手、核心原理（为什么快）、dev/build 双引擎。点击下面的文章阅读：

• Vite 快速入门——三条命令、别名/代理/环境变量、生产构建（会用）
• Vite 为什么这么快：dev 与 build 的双引擎——原生 ESM、esbuild 预构建、HMR、为什么 build 用 Rollup（原理锚点）

同样是启动开发服务器，Webpack 项目越大越慢，Vite 却永远是秒开。差异不是「优化得好」，而是思路根本不同：Webpack 在 dev 时也要先打包，Vite 干脆不打包。这篇把 Vite 快的三个原因讲透：原生 ESM、依赖预构建、HMR，以及为什么生产构建反而换回 Rollup——dev 和 build 是两套引擎。

一、总览：Vite 的三层加速 ​

Vite 快的秘密可以拆成三层，每层解决一个问题：

层	手段	解决什么
第一层	dev 不打包，浏

BinMaker 最早的项目用 Webpack：npm run dev 启动要等 40 秒，改一个字的样式也要等它重新编译。后来接手 Vite 项目——命令一点就开，改代码保存瞬间刷新。同样写前端，开发体验差了一个数量级。这篇按「会用」的标准讲 Vite：三条命令、常用配置、生产构建，够日常开发跑通。

一、Vite 是什么：dev 时根本不用打包 ​

老一代构建工具（Webpack）的思路是打包：把所有模块（JS、CSS、图片）分析依赖、合并压缩成一个 bundle，浏览器才能跑。项目一大，打包就要等很久。

Vite 换了个思路

Vue 前端框架学习笔记，覆盖版本演进、快速入门、响应式原理、组件通信、组合式 API、路由、状态管理、框架对比等。点击下面的文章阅读：

• Vue 版本演进：Vue 2 与 Vue 3 全对比——版本时间线、核心差异对照表、破坏性变更（版本锚点，先读这篇）
• Vue 快速入门——数据驱动视图、模板语法、响应式、组件化（会用）
• [Vue 响应式原理详解](/fullstack/vue/vue-reactivity/

一个页面拆成几十个组件后，最大的麻烦不是写组件，而是数据怎么在组件之间流转。父组件想让子组件显示自己的数据、子组件操作完要告诉父组件、爷孙组件隔着两层怎么传、两个八竿子打不着的组件要共享登录态……每个场景都有对应的招式，用错了代码就绕。

这篇把 Vue 组件通信的几种方式摆开：各自解决什么问题、怎么写、什么时候用，最后一张对比表收口。下文基于 Vue 3（版本脉络见 Vue 版本演进：Vue 2 与 Vue 3 全对比）。

一、先立规矩：单向数据流 ​

Vue（和 Re

改过一个 2000 行的 Vue 2 组件：一个「资产详情」页面，同一套逻辑被拆散在 data、computed、methods、watch 四个区块里。改一个「按部门筛选」的需求，要在五个地方来回跳，还得时刻记着哪些变量之间互相依赖。组件一大，Options API 的「按类型分区块」就开始拖后腿了。

这篇讲 Composition API（组合式 API，<script setup> 那套）：它解决了什么、和 Options API 怎么对照、生命周期去哪了，以及最核心的「逻辑复用」为什么从 mixin 演进成了 comp

概念看懂了，一到真实项目还是不知道怎么下手？这篇用一个最典型的后台场景——登录态管理，把 Pinia 的三个核心用法串起来：store 存登录态、持久化保证刷新不丢、路由守卫做权限拦截。改完你就知道真实项目里 store 是怎么组织、怎么跟路由配合的。

前置：Pinia 的 state / getters / actions、Options 与 Setup 两种写法、插件机制，见 Pinia 状态管理详解；路由守卫语法见 [Vue Router 路由详解](/fullstack

Pinia 状态管理详解 ​

多个组件要共享同一份数据——登录用户信息、购物车、全局配置。Vue 2 时代的标准答案是 Vuex，Vue 3 时代的官方推荐换成了 Pinia（本文基于 Pinia 4.x，配 Vue 3）。名字看着像"菠萝"，其实是 Pineapple（菠萝）+ Vue 的组合。

先还原一个真实场景：BinMaker 的后台系统里，侧边栏要显示当前登录人，顶栏要显示未读消息数，多个页面都要判断"是不是管理员"。这些数据如果每个组件各自存一份，改一处别处不同步，页面之间数据就"打架"了。

**状态管理（Stor

内部系统的资产列表，是个早期用原生 JS 写的老模块：敲关键词表格立刻过滤，点状态按钮只看「在用」或「报废」。功能少时还清爽，需求一叠加就乱——关键词和状态要组合生效、清空保留状态、序号重排，每个回调都手动刷一遍 DOM，改一处漏一处，视图经常跟数据对不上。

我见过不少这类代码，回头看，问题不在写法，在思路：原生 JS 是「命令式」，每一步都得亲自指挥浏览器改页面；而「数据一变、界面跟着变」的需求，本该「声明式」——声明数据长什么样，界面由框架同步。Vue 干的就是这个：数据是唯一真相，模板是它的投影。

这篇按「会用」的标准讲三块