TriF

虚拟列表实现 实现思路 渲染可视区域的数据：根据滚动位置计算出可见的起始索引和结束索引； 总高度占位：整个容器高度与真实数据等高，让滚动条正常工作； 滚动定位：通过一个“内层偏移容器”将可视区域的内容

一. 事件总线的基本原理 事件总线本质上是一个全局的事件管理器，提供以下功能： 事件发布（emit） ：发送消息通知其他订阅者某事件已发生。 事件订阅（on） ：监听指定事件，当事件触发时执行回调。

在实际开发中，几乎每个前端项目都离不开消息提示（如 Toast 成功提示）、模态弹窗（如确认框）、全局通知等。如何优雅地封装这些组件，并使它们具备「全局可调用」「跨组件通信」「异步回调」等能力？本篇将

自定义指令：封装可重用逻辑（v-debounce 实现） 自定义指令是 Vue3 中用于封装可重用逻辑的工具，例如防抖功能。 以下是如何创建一个防抖指令 v-debounce。 使用示例：

没有什么比在用户操作得正嗨时，突然提示“登录已过期，请重新登录”的提示更让人沮丧的了。这种突兀的中断不仅破坏了用户体验，甚至可能导致未保存的数据丢失。 然而，我们都知道，出于安全考虑，用于身份验证的 

上文我们讲到了编译时vue如何转换标准AST中vue独有的属性、指令（例如v-for、#slot）等内容。本文我们来分析一下转换后的AST最终如何生成代码。 一、示例模板 让我们以一个具体的模板为例，

上文分析了parser的实现，包括词法分析和语法分析。经过parser的解析，template字符串就生成了一颗AST。此时的AST的节点上还有vue独有的属性、指令（例如v-for、#slot）等内

上文，我们讲到 vue 的编译器compile-core由三个部分组成：解析器、转换器、代码生成器。那么本文我们来详细分析解析器的实现原理，弄清楚解析器如何将模版解析为 AST。 一、解析器的整体设计

上文我们梳理了 vue 的编译流程，vue 借助 vite 插件在构建流程中实现编译。而 vite 插件又引用了 vue 源码中的compiler-core模块，本文我们来分析compiler-cor