前端小巷子

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

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

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

当多个组件拥有重复的 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...

在初学 Vue 时，我们经常会遇到这样的困惑：数据明明已经改了，可页面却没立刻变化；或者手动去获取更新后的 DOM，结果拿到的是旧值。这时候，Vue 官方会推荐我们使用 t...

在前端单页应用（SPA）中，路由是连接用户操作与页面展示的核心桥梁。Vue Router 作为 Vue 官方的路由管理器，提供了丰富的功能和灵活的配置。...

生命周期不是营销词汇，而是 Vue 2 运行时内部「可观测的执行链路」。掌握其精确时序，意味着能够在正确的时间点干预响应式系统、DOM 渲染与依赖收集，从而避免性能回退与内...

单页应用没有浏览器自带的整页刷新动画，路由切换像「瞬间切图」，用户体验生硬。本文演示如何借助 Vue Router 的导航守卫 + Vue 的 <transition> 系...

在单页应用里，“页面”不再是整屏刷新，而是由路由驱动的组件树。嵌套路由（Nested Routes）是唯一能把深度与可维护性同时保留下来的方案。...

Vue CLI 把 webpack、babel、postcss、dev-server 等工具链封装成「零配置」工具，但真实项目总有「自定义 loader、路径别名、代理转发...

Vue CLI 把「模式 + 环境变量」做成了一套约定大于配置的体系，只要理解规则，就能让同一份源码在任意环境自动作出正确的行为。...

当一次性渲染十万条 DOM 节点时，浏览器会瞬间陷入「卡顿—白屏—崩溃」三连击。虚拟长列表（Virtual Scroller）把「按需渲染」做到极致：只绘制可见区域并加少量...

keep-alive 是 Vue 2 运行时里最常被提及却最少被深究的内置组件。它看上去只是“把页面缓存起来”，背后却涉及实例生命周期劫持、LRU 缓存策略、VNode 复...

在大型单页应用中，性能瓶颈往往并非 Vue 本身，而是开发者对运行时行为的不当操作。下面列出的七条策略均来自源码级观察与线上验证，每一条都旨在减少不必要的重新渲染、DOM ...

Vue 的 <transition> 与 <transition-group>把元素或片段的插入、删除、移动翻译成可预测的 CSS 类名序列，再交由浏览器的样式系统完成剩余...