技术喵猫巷

当你写下 <div>{{ msg }}</div>，浏览器最终看到的却是一连串精确到像素的绘制指令。Vue 3 在这条链路里扮演了「翻译官 + 调度者」的双重角色。

两段看似「都是改 5 次数据」的代码摆在你面前，渲染次数却不同。本文用 100 行代码把同步批处理与异步微任务的底层机制拆开讲透，让你以后遇到同类问题直接秒答。

Vue2 验证了「响应式驱动视图」的威力，却在数组索引、属性增删等场景留下无法追踪的死角。Vue3 并未缝缝补补，而是把整座大厦的地基——数据拦截机制——彻底替换为 Proxy。

当多个组件拥有重复的 data、生命周期钩子或业务函数时，复制粘贴会迅速演变成维护灾难。Vue 生态提供了三条主流路径：Mixin、高阶组件、Composition API。

Vue 3 不是「加量版」Vue 2，而是一次底层重写与范式革新。它保留了熟悉的模板语法，却在编译器、运行时、响应式系统、TypeScript 支持等维度做了系统性升级。

“Vue 3 有时占用的 CPU 时间不到 Vue 2 的十分之一。”本文带你拆解 Vue 3 在渲染性能、包体体积和内存占用三大维度的提速秘诀。

在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。

Vue 将事件系统拆分为原生 DOM 事件与自定义组件事件两套正交实现，前者对接浏览器事件循环，后者基于发布–订阅模型。本文以 v-on（缩写 @）为线索，结合运行时源码路径，给出端到端的实现剖析。

当搜索引擎的爬虫访问我们的站点时，如果只看到一句冷冰冰的 <div id="app"></div>，SEO 基本就凉了。Vue SSR正是为了解决这个问题：让首屏 HTML 在服务器上生成。