1. Vue3 源码解析(十):watch 的实现原理

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

    2021/06/16 前端 Vue

  2. Vue3 源码解析(九):setup 揭秘与 expose 的妙用

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

    2021/06/15 前端 Vue

  3. Vue3 源码解析(八):ref 与 computed 原理揭秘

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

    2021/06/13 前端 Vue

  4. Vue3 源码解析(七):依赖收集与副作用函数

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

    2021/06/10 前端 Vue

  5. Vue3 源码解析(六):响应式原理与 reactive

    今天这篇文章是我会带着大家一起深入剖析 Vue3 的响应式原理实现,以及在响应式基础 API 中的 reactive 是如何实现的。对于 Vue 框架来说,其非侵入的响应式系统是最独特的特性之一了,所以不论任何一个版本的 Vue,在熟悉其基础用法后,响应式原理都是我最想优先了解的部分,也是阅读源码时必细细研究的部分。毕竟知己知彼百战不殆,当你使用 Vue 时,掌握了响应式原理一定会让你的 coding 过程更加游刃有余的。

    2021/06/08 前端 Vue

  6. Vue3 源码解析(五):Patch 算法

    与 React 一样,Vue 在处理虚拟 DOM 的更新时,也有自己的 diff 算法 —— patch。

    2021/05/30 前端 Vue

  7. Vue3 源码解析(四):代码生成器

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

    2021/05/20 前端 Vue

  8. Vue3 源码解析(三):静态提升

    什么是静态提升

    2021/05/10 前端 Vue

  9. Vue3 源码解析(二):AST解析器

    上一篇文章中,我们从 packges/vue/src/index.ts 的入口开始,了解了一个 Vue 对象的编译流程,在文中我们提到 baseCompile 函数在执行过程中会生成 AST 抽象语法树,毫无疑问这是很关键的一步,因为只有拿到生成的 AST 我们才能遍历 AST 的节点进行 transform 转换操作,比如解析 v-if、v-for 等各种指令,或者对节点进行分析将满足条件的节点静态提升,这些都依赖之前生成的 AST 抽象语法树。那么今天我们就一起来看一下 AST 的解析,看看 Vue 是如何解析模板的。

    2021/05/06 前端 Vue

  10. Vue3 源码解析(一):编译流程

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

    2021/04/18 前端 Vue