Vue3源码第三篇-Vue3是如何实现响应性

分手后的思念是犯贱 2022-09-14 09:04 143阅读 0赞

# 系列文章目录 #

[Vue3源码 第一篇-总览][Vue3_ _-]  
[Vue3源码 第二篇-Reactive API][Vue3_ _-Reactive API]  
[Vue3源码 第四篇-Vue3 setup][Vue3_ _-Vue3 setup]

### 文章目录 ###

*  系列文章目录
 *  前言
 *  一、响应性是什么？
 *  二、源码阅读
 *   *  1.数据变更
     *  2.如何得知当前正在运行的函数
     *  3.Data Proxy如何收集依赖于自己的函数
     *  4.依赖项变更时如何通知正在运行的函数
 *  总结

# 前言 #

这篇文章主要是阅读effect、trigger、track相关的源码，也就是对依赖的收集以及触发的一个过程，不涉及到render，queueJob等渲染和调度的源码，之后会分章节阅读render和queueJob部分的源码

# 一、响应性是什么？ #

大家可以去官网了解[响应性][Link 1]，官网的讲解就很好，在阅读源码前可以先学习下官网的响应性原理，对学习底层源码会有更好的理解。

# 二、源码阅读 #

想要读懂响应性的源码，首先要明白Vue3响应性是如何去实现，响应性实现的功能是，当数据变更的时候，视图会自动的发起更新，我们简单画图理解下功能。**Data Proxy** 作为数据代理来拦截get，set 操作，让我们得知数据发生改变，但我们此时还无法更新到视图层，因为我们不知道谁受变化的Data影响，这时候就需要**effect**副作用函数登场了，effect会包裹在所有对数据变化有依赖的函数外层（组件的渲染和计算属性和watch等），通过effect可以知道当前到底是哪个函数在运行了，Data Proxy也可找到是谁在依赖他，也就是图中**track**跟踪所做的事。当值变化时，通过set调用**trigger**触发器来告诉effect需要执行data变化后带来的影响，不同的effect调用不同的**schedule**任务来完成值变化后需要做的事情。  
![响应性][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

那这里就有几个关键的问题，第一：我们如何监听数据的变化也就是Data Proxy，第二：如何得知当前正在运行的函数，第三：Data Proxy如何收集依赖于自己的函数，第四：依赖项变更时如何通知正在运行的函数。带着这几个问题我们一步步从源码中获取答案。话不多说，开冲~~~  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center]

## 1.数据变更 ##

首先我们看第一个问题如何知道数据变更了：上一篇[Vue3源码 第二篇-Reactive API][Vue3_ _-Reactive API 1]更大家一起了解了Reactive API 响应性API，我们知道Vue3是通过ES6 Proxy新特性来实现对所有数据的代理，我们可以通过代理去拦截到数据的get和set操作。

## 2.如何得知当前正在运行的函数 ##

通过官网的解释，我们知道在组件渲染（computed和watch会在之后的文章了解其源码）的外层包裹了effect副作用函数，所以我们可以找到创建组件时的源码，从其中找到创建effect的方法，所以在**mountComponent()** 挂载组件上我们找到了创建effect的方法 **setupRenderEffect**，我们来看下这个创建的源码：

## 3.Data Proxy如何收集依赖于自己的函数 ##

Data Proxy 如何收集依赖自己的函数呢？简单的来说，哪个函数获取了需要我的值就证明依赖我，有几种情况会获取值呢？获取值的情况大体可以分为 has，ownKeys，get，下面就是对象Proxy的handle，主要是拦截了一下几个操作。

const mutableHandlers = { 
        get, // 获取值的拦截
        set, // 更新值的拦截
        deleteProperty, // 删除拦截
        has, // 模版with绑定访问对象时会拦截
        ownKeys // 获取属性key列表
    };

我们看下这几个程序内部，都有调用track的地方

我们再看一下track内部的代码

## 4.依赖项变更时如何通知正在运行的函数 ##

通知的话很容易想到，只要拦截到更新相关的操作就可以了。所以就是set和delete相关的操作。所以在Proxy的set和deleteProperty拦截器中能找到**trigger**函数

trigger函数会取出对应key依赖的effect去执行他所对应的scheduler。

# 总结 #

这篇源码阅读从4个问题开始一一阅读源码，对官网响应性的解释对应的源码进行了解，个人能力有限，如果有理解不对的地方，希望大家多多斧正。最后希望大家给个赞吧，谢谢啦~  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]

[Vue3_ _-]: https://blog.csdn.net/qq_26626113/article/details/119169666
[Vue3_ _-Reactive API]: https://blog.csdn.net/qq_26626113/article/details/119837310
[Vue3_ _-Vue3 setup]: https://blog.csdn.net/qq_26626113/article/details/120657470
[Link 1]: https://v3.cn.vuejs.org/guide/reactivity.html#%E4%BB%80%E4%B9%88%E6%98%AF%E5%93%8D%E5%BA%94%E6%80%A7
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/bbdf1e88e82a4800ae4a68bda23be0cb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_10_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/ff74f67262f2474d982a13165e0386d1.png
[Vue3_ _-Reactive API 1]: https://editor.csdn.net/md/?articleId=119837310
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP55av55avMDQxMw_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/8c0d0ab41f8e478cbe9e22130d05abde.png