本篇文章笔者会讲解 Vue3 中侦听器相关的 api：watchEffect 和 watch 。在 Vue3 之前 watch 是 option 写法中一个很常用的选项，使用它可以非常方便的监听一个数据源的变化，而在 Vue3 中随着 Composition API 的写法推行也将 watch 独立成了一个 响应式 api，今天我们就一起来学习 watch 相关的侦听器是如何实现的。

在前几篇文章中我们一起学习了 Vue3 中新颖的 Composition API，而今天笔者要带大家一起看一下 Vue3 中的另一个新鲜的写法 —— setup。

在 Vue3 新推出的响应式 API 中，Ref 系列毫无疑问是使用频率最高的 api 之一，而 computed 计算属性是一个在上一个版本中就非常熟悉的选项了，但是在 Vue3 中也提供了独立的 api 方便我们直接创建计算值。而今天这篇文章，笔者就会给大家讲解 ref 与 computed 的实现原理，让我们一起开始本章的学习吧。

在上一篇文章《响应式原理与 reactive》中由于篇幅限制笔者留下了两个小悬念 track 依赖收集处理器与 trigger 派发更新处理器没有细致讲解，而在本篇文章中笔者会带着大家一起来学习 Vue3 响应式系统中的依赖收集部分和副作用函数。

今天这篇文章是笔者会带着大家一起深入剖析 Vue3 的响应式原理实现，以及在响应式基础 API 中的 reactive 是如何实现的。对于 Vue 框架来说，其非侵入的响应式系统是最独特的特性之一了，所以不论任何一个版本的 Vue，在熟悉其基础用法后，响应式原理都是笔者最想优先了解的部分，也是阅读源码时必细细研究的部分。毕竟...

Vue 在通过 VNode 节点渲染 DOM 时，并不是通过当前的 VNode 节点去暴力的更新 DOM 节点，而是对新旧两个 VNode 节点通过 patch 算法进行比较，然后通过对比结果找出差异的属性或节点进行按需更细。显而易见，patch 能够减少不必要的开销，提升性能。

在 Vue3 源码解析系列的第一篇文章中，笔者带领大家一起走了一遍一个 Vue 对象实例化的流程，在一起看 @vue/compiler-core 编译模块的时候，首次出现了代码生成器 —— generate 模块。为了帮助大家回顾，我们再来看一遍 compile 编译过程中发生了什么。

Vue3 尚未发布正式版本前，尤大在一次关于 Vue3 的分享中提及了静态提升，当时笔者就对这个亮点产生了好奇，所以在源码阅读时，静态提升也是笔者的一个重点阅读点。

上一篇文章中，我们从 packges/vue/src/index.ts 的入口开始，了解了一个 Vue 对象的编译流程，在文中我们提到 baseCompile 函数在执行过程中会生成 AST 抽象语法树，毫无疑问这是很关键的一步，因为只有拿到生成的 AST 我们才能遍历 AST 的节点进行 transform 转换操作，比如解析 v-if、v-for 等各种指令，或者对节点进...

Vue3 发布已经有一段时间了，最近也有机会在公司项目中用上了 Vue3 + TypeScript + Vite 的技术栈，所以闲暇之余抽空也在抽空阅读 Vue3 的源码。本着好记性不如烂笔头的想法，在阅读源码时顺便记录了一些笔记，也希望能争取写一些源码阅读笔记，帮助每个想看源码但可能存在困难的同学减少理解成本。

M1芯片出来了有一段时间了，各类软件的兼容性已经跟进的差不多了，迫于 M1 实在太香，我的 M1 Macbook 也于本周到达了我的手上。在花费了两三个小时搭建完开发环境后，立马用它开始干活了。这几天的感受只有寥寥一语可以概括：太 TM 香了！太强了

对于初学者来说，在面试或者学习的过程中，几乎都能接触到事件循环 (Event Loop) 这个名词，但是对于一个刚入门的前端工程师来说大部分都不明白事件循环到底是什么东西，以及它的作用是什么。今天这篇文章就是以一段代码和图片的示例来展示一个简单的事件循环的过程，希望看完这篇文章，能够让你对 JavaScript 的事件循...