阿狗工具

前言

Vue3有个Ref API，官网文档 说明其主要的用处是：1、将一个原始类型值 (例如，一个字符串)，变成响应式的。2、当解构的两个 property 的响应性都会丢失时，可以将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联。
下面是对应的两个例子：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  title: 'Vue 3 Guide',
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
console.log(book.title) // 'Vue 3 Detailed Guide'

由于 Proxy 只能代理对象，那么Vue3是如何代理原始类型值的呢？
Ref 源码在 packages/reactivity/src/ref.ts 下，阅读版本是v3.2.30，ref.ts只有200多行代码。看一下 Ref 是怎么实现的。

正文

（1）Ref

找到ref函数，其调用路径是 ref -> createRef -> new RefImpl，RefImpl是一个类，其实现很简单，提供一个value属性和value的访问器get、set。

class RefImpl<T> {
  private _value: T

  public readonly __v_isRef = true

  constructor(private _rawValue: T, public readonly _shallow = false) {
    this._value = _shallow ? _rawValue : convert(_rawValue)
  }

  get value() {
    track(toRaw(this), TrackOpTypes.GET, 'value')
    return this._value
  }

  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this._shallow ? newVal : convert(newVal)
      trigger(toRaw(this), TriggerOpTypes.SET, 'value', newVal)
    }
  }
}

也就是说，ref的实现，还是使用对象，将原始类型值包一层，存到对象的value属性上。这也是为什么需要用 count.value 来访问和设置属性值。最终还是要使用对象的访问器get来收集依赖（track）、set来触发更新（trigger）。我们可以自己简单实现一个ref：

image.png

打开 Vue SFC Playground: ref 可查看和运行上面的例子。

（2）toRef、toRefs

接下来看看ref.ts中toRef、toRefs的实现，查看这两个API的使用，发现其就是使用 ref 与源响应式对象字段的响应式关联起来。其解决的问题是，当响应式对象的属性解构到新的普通对象newObj时，响应式会丢失：

const book = reactive({
  author: 'Vue Team',
  title: 'Vue 3 Guide',
})

const newObj = {
  ...book
}

newObj.author // 收集不到依赖
newObj.author = "Team" // 触发不了更新

下面看看toRef、toRefs：

image.png

image.png

（3）ref.value问题与proxyRefs

当我们使用ref时，很多人吐槽，我们总是要加一个.value，用起来太不爽了。但我们发现，我们在模板中使用ref的时候，并不需要.value，那它是怎么实现的呢？

在ref.ts中还有一个 proxyRefs :

image.png

可以看到，它就是对包含 ref类型字段的对象再包一层，把普通对象newObj也转成代理对象！当访问 newObj.foo时，判断newObj.foo是不是一个ref，如果是则代理到newObj.foo.value。

然后我们搜一下proxyRefs在哪里有使用，可以看到在packages/runtime-core/src/component.ts中，handleSetupResult 会将 setupResult 传入 proxyRefs！这就是我们模板中使用 ref 对象（newObj.foo）不用加.value的原因。

image.png

至此，模板中的使用问题解决了。但我们还有个问题是，在script中使用还是需要.value:

function add() {
    newObj.foo.value++
}

对于这个问题，尤大提了一个提案 Ref Sugar 的 RFC，即 ref 语法糖，目前还处理实验性的（Experimental）阶段。提案的主要内容是尤大想提供一个语法糖$ref。使用$ref，编译器编译时会自动加上.value，这样我们编写代码时就不用使用.value了：

import { $ref } from 'vue'

const count = $ref(0)
console.log(count) // 0

count++
console.log(count) // 1

我们通过 Vue Playground: $ref 可以直观地感受一下。

总结

至此，ref的源码也就看得差不多了，可以看到这是一个多重代理的东西。如果我们在模板中使用一个ref属性(newObj.foo)，看看其经过的代理：
newObj.foo -> newObj.foo.value -> reactiveObj.foo -> rawObj.foo。

其中rawObj是我们最初的普通对象。所以标题说这真是套娃。

参考

Vue3 Ref 语法糖，告别 .value 的写法