Vue3源码笔记阅读1——Ref响应式原理本专栏主要用于记录自己的阅读源码的过程，希望能够加深自己学习印象，也欢迎读者可

本专栏主要用于记录自己的阅读源码的过程，希望能够加深自己学习印象，也欢迎读者可以帮忙完善。接下来每一篇都会从定义、运用两个层面来进行解析

定义

例子：模板中访问ref(1)

<template>
    <div>{{str}}</div>
</template>
<script>
import {ref} from 'vue';
const str = ref('hello vue');
</script>

createApp.mount()开始到组件render的前置流程图

当执行render时，访问到ref的value的getter，从而触发dep.track，

track中

if（link===undeinfed || link.sub !== activeSub）代表着依赖首次收集依赖 或被 新的一个subscriber订阅者访问。此时会通过新建一个Link节点来连接dep和sub，同时将节点添加至Link队列的队尾

（3.5.0+后，依赖收集新增了Link，如果还不太理解Linkd的，推荐可以看一下这篇文章《看不懂来打我！让性能提升56%的Vue3.5响应式重构》）

当响应式数据发生变化，触发了value的trigger

trigger主要做了两件事

1. 改变了version、globalVersion。版本控制主要就是用来标记是否存在响应式数据的变化

2. 触发notify

notify主要就是通知sub订阅者发生变化了，要执行订阅的逻辑了。endBatch里触发trigger真正的执行副作用

run方法中执行了fn（副作用方法），重新开始收集依赖。完成后，执行cleanupDeps,清除掉version=-1的link，version=-1意味着对应的link.dep已经被取消订阅了

以上就是一次响应式变化的简要执行流程，里面还有很多细节我没有完全解析到位，在这个流程阅读过程中我收获了：