Vue3.0 —— Ref 是怎么实现的？

在 Vue 3.0 中，ref 是通过 reactive 函数和 readonly 函数实现的。ref 用来创建一个响应式的引用对象，可以是基本类型的值，也可以是对象。

以下是一个简单的 ref 实现示例：

function ref(value) {
  return createRef(value);
}
 
function createRef(value) {
  const that = {
    // _value 是内部的私有属性
    _value: value,
    get value() {
      track(that); // 追踪
      return that._value;
    },
    set value(newValue) {
      if (that._value !== newValue) {
        that._value = newValue;
        trigger(that); // 触发更新
      }
    }
  };
  return that;
}
 
function track(ref) {
  // 追踪逻辑，比如可以把 ref 添加到一个全局的追踪集合中
  console.log('追踪:', ref._value);
}
 
function trigger(ref) {
  // 触发更新逻辑，比如通知视图进行重新渲染
  console.log('触发更新:', ref._value);
}
 
// 使用示例
const count = ref(0);
console.log(count.value); // 追踪并打印：0
count.value++; // 触发更新并进行自增操作

在这个示例中，ref 函数创建了一个包含 getter 和 setter 的对象，getter 用于追踪（比如说在控制台打印值），setter 用于触发更新（比如说视图重新渲染）。这样，每当 ref 的值被访问或者被修改时，就可以执行相应的操作。这个简单的实现没有实现完整的依赖追踪和更新触发机制，但足以说明 ref 是如何被实现的。