各位观众老爷们，大家好！今天咱们来聊聊Vue 3源码里一个相当重要，但又容易被忽略的小家伙——Ref。
别看它名字短小精悍，其实藏着不少秘密。咱们今天就把它扒个精光，看看ref是如何通过get/set拦截，实现对value属性的追踪，让咱们的数据变化都能被Vue精准捕捉到。
一、Ref是个啥？为什么我们需要它？
首先，明确一下Ref是干嘛的。简单来说，Ref就是Vue 3里用来创建一个响应式数据容器的东西。它可以包装任何JavaScript值，让这个值变成响应式的，也就是说，当这个值发生变化时，Vue能够知道，并且更新相关的视图。
为啥我们需要它？Vue 3不是已经有reactive了吗？
好问题！reactive只能让对象变成响应式，对于基本类型的数据（比如数字、字符串、布尔值）就无能为力了。而Ref就是用来解决这个问题的。
举个例子：
// 使用 reactive，基本类型无法响应式
const count = reactive(0); // 报错！reactive只能接受对象
// 使用 ref，完美解决
const count = ref(0);
console.log(count.value); // 0
count.value = 1;
console.log(count.value); // 1看到了吧？ref通过.value属性来访问和修改内部的值，这可不是随便设计的，背后有深刻的道理。
二、ref的内部实现：一层薄薄的“外壳”
咱们先来看看ref函数的大致实现（简化版，省略了部分优化和细节）：
function ref(value) {
return createRef(value);
}
function createRef(rawValue) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue);
}
class RefImpl {
constructor(value) {
this._value = convert(value); // 对 value 进行转换，可能是 reactive
this.__v_isRef = true; // 标识这是一个 Ref 对象
}
get value() {
track(this, 'value'); // 收集依赖
return this._value;
}
set value(newValue) {
if (newValue !== this._value) {
this._value = convert(newValue); // 对 newValue 进行转换，可能是 reactive
trigger(this, 'value'); // 触发更新
}
}
}
function isRef(value) {
return !!(value && value.__v_isRef);
}
// 如果 value 本身是一个对象，则将其转换为 reactive 对象
function convert(val) {
return isObject(val) ? reactive(val) : val
}是不是有点眼花缭乱？别怕，咱们一步一步来分析：
ref(value)函数： 这是我们最常用的函数，它接收一个value作为参数，然后调用createRef来创建真正的Ref对象。createRef(rawValue)函数： 这里有个小小的优化，如果传入的rawValue本身就是一个Ref对象，那就直接返回它，避免重复创建。否则，就创建一个新的RefImpl实例。RefImpl类： 这才是Ref的核心所在！它内部维护了一个_value属性，用来存储实际的值。重点来了，它使用了get和set拦截器，来追踪_value的变化。convert(val)函数： 这个函数的主要作用是，如果传入的value是一个对象，那么就使用reactive方法将它转换为响应式对象。这样，即使ref内部存储的是一个对象，也能保证其响应性。isRef(value)函数： 判断一个值是否是Ref对象，通过检查它是否有一个__v_isRef属性。这是一个内部标识，Vue 用来区分Ref对象和其他普通对象。
三、get/set拦截：追踪数据变化的“秘密武器”
现在咱们来重点看看RefImpl类里的get和set拦截器：
get value()： 当我们访问ref.value时，这个get拦截器会被调用。它做了两件事：track(this, 'value')：这句代码非常关键！它会把当前正在执行的 effect（通常是组件的渲染函数）添加到依赖列表中。也就是说，它告诉 Vue：当前组件依赖于这个Ref对象的value属性。return this._value：最后，返回_value的实际值。
set value(newValue)： 当我们修改ref.value时，这个set拦截器会被调用。它也做了两件事：if (newValue !== this._value)：首先，判断新值和旧值是否相同。如果相同，就什么也不做，避免不必要的更新。this._value = convert(newValue)：如果新值和旧值不同，就更新_value的值，并且调用convert，保证newValue如果是一个对象，那么它可以被转换为响应式对象。trigger(this, 'value')：这句代码也很关键！它会触发所有依赖于这个Ref对象的value属性的 effect，让它们重新执行。也就是说，它告诉 Vue：这个Ref对象的value属性已经发生了变化，需要更新视图了。
简单总结一下：
| 操作 | 触发的拦截器 | 做的事情 |
|---|---|---|
访问ref.value |
get |
1. track(this, 'value')：收集依赖，将当前正在执行的 effect 添加到依赖列表中。 2. return this._value：返回_value的实际值。 |
修改ref.value |
set |
1. if (newValue !== this._value)：判断新值和旧值是否相同，避免不必要的更新。2. this._value = convert(newValue)：更新_value的值。3. trigger(this, 'value')：触发更新，让所有依赖于这个Ref对象的value属性的 effect 重新执行。 |
四、track和trigger：响应式系统的核心
咱们上面提到了track和trigger这两个函数，它们是Vue响应式系统的核心组成部分。虽然咱们今天不打算深入讲解它们，但还是简单介绍一下它们的作用：
track(target, key)： 这个函数的作用是收集依赖。它会把当前正在执行的 effect（通常是组件的渲染函数）添加到target对象的key属性的依赖列表中。trigger(target, key)： 这个函数的作用是触发更新。它会遍历target对象的key属性的依赖列表，然后执行列表中的所有 effect。
可以把它们想象成一个订阅发布系统：
track：相当于订阅者，它订阅了某个数据的变化。trigger：相当于发布者，当数据发生变化时，它会通知所有的订阅者。
五、shallowRef：一个“浅”响应式的Ref
Vue 3还提供了一个shallowRef函数，它和ref非常相似，但有一个重要的区别：shallowRef只对value属性本身是响应式的，而不会对value内部的属性进行响应式转换。
举个例子：
const obj = shallowRef({ count: 0 });
obj.value.count++; // 不会触发视图更新！
obj.value = { count: 1 }; // 会触发视图更新！可以看到，修改obj.value.count不会触发视图更新，因为shallowRef只对obj.value本身是响应式的，而不会递归地将obj.value内部的count属性也变成响应式的。
shallowRef适用于一些性能敏感的场景，比如当我们需要处理大量数据，但只需要对数据的整体进行响应式追踪时，可以使用shallowRef来避免不必要的性能开销。
六、customRef：自定义你的Ref
Vue 3还提供了一个customRef函数，它允许我们完全自定义Ref的行为。这给我们提供了极大的灵活性，可以根据自己的需求来实现各种各样的Ref。
customRef接收一个工厂函数作为参数，这个工厂函数接收track和trigger两个函数作为参数，然后返回一个包含get和set方法的对象。
举个例子：
function useDebouncedRef(value, delay) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
};
});
}
const debouncedValue = useDebouncedRef('hello', 500);这个例子实现了一个带有防抖功能的Ref。当我们修改debouncedValue.value时，并不会立即更新，而是会等待delay毫秒后才更新。
七、总结
今天咱们深入剖析了Vue 3源码里Ref的内部实现。咱们了解到：
Ref是用来创建一个响应式数据容器的东西，它可以包装任何JavaScript值，让这个值变成响应式的。Ref通过get和set拦截器来追踪value属性的变化。track和trigger是Vue响应式系统的核心组成部分，它们分别负责收集依赖和触发更新。shallowRef是一个“浅”响应式的Ref，它只对value属性本身是响应式的，而不会对value内部的属性进行响应式转换。customRef允许我们完全自定义Ref的行为。
掌握了Ref的内部实现，能帮助我们更好地理解Vue 3的响应式系统，写出更高效、更优雅的Vue代码。希望今天的讲座对大家有所帮助！
彩蛋：
其实，Vue 3的响应式系统远不止这些，还有很多其他的概念和技术，比如computed、watch等等。如果你对Vue 3的源码感兴趣，可以继续深入研究，相信你会发现更多有趣的秘密！
下次有机会，咱们再聊聊Vue 3的其他源码细节！ 感谢大家的收看！