TriF

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

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

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

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

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

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

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

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

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

一、从项目构建开始 通过前面的文章，我们已经分析完了vue3源码的响应式、渲染、生命周期、性能优化等核心部分，现在只剩下编译流程没有分析。接下来通过一系列文章来分析编译流程...

通过前面的文章，我们已经分析了vue3的响应式系统、render流程、diff算法、生命周期。本文，我们来总结一下vue3源码中涉及的性能优化方法。 1. 编译优化 1.1...

Suspense 是 Vue3 新增的一个内置组件，用于处理异步组件和异步依赖。本文将深入分析其实现原理，理解 Vue3 是如何优雅地处理异步加载状态的。 1. 组件示例 ...

上文我们分析了KeepAlive组件的实现。本文我们来分析Teleport，Teleport 是 Vue3 新增的一个内置组件，用于将组件内容传送到 DOM 树的其他位置。...

1. 组件示例 让我们先看一个典型的 KeepAlive 使用场景： 这个示例展示了： 两个需要缓存的组件：TabA（计数器）和 TabB（输入框） KeepAlive 的...

在大型应用中，我们需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现这个功能。本...

在上文中，我们分析了组件级别的生命周期钩子。本文我们将分析 Vue3 中虚拟节点(VNode)级别的生命周期钩子，这些钩子提供了更细粒度的 DOM 操作控制。 1. VNo...

本文，我们将核心流程再过一遍，重点关注所有生命周期钩子函数的执行时机，以及它们在不同场景下的执行顺序。 1. 生命周期钩子函数的执行时机 Vue3 的生命周期主要分为四个阶...

在文中我们分析了 ref 的实现，本节我们来看看另一个核心响应式 API —— reactive 的实现原理。reactive 主要用于为对象类型创建响应式代理。 实例引入...

上面两篇文章我们分析了 watch 和 watchEffect 的实现，今天我们来看看 ref 的具体实现。ref 是 Vue 3 中最基础的响应式 API 之一，它可以将...

一、前言 在上文中，我们分析了 Vue3 的 watch API 实现。本文我们将分析另一个重要的响应式 API —— watchEffect。与 watch 不同，wat...