Vue3中的 ref() 为何需要 .value ?

如果对前端八股文感兴趣，可以留意公重号：码农补给站，总有你要的干货。

前言

本文是 Vue3 源码实战专栏的第 8 篇，从 0-1 实现 ref 功能函数。

官方文档 中对ref的定义，

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

老规矩还是从单测入手，那ref函数的实现需要 3 个测试用例：

1. 核心功能，ref包裹的对象需要 .value 访问
2. ref包裹的对象是个响应式对象
3. ref不仅仅可以应用在单值上，对象类型也是响应式的

ref 对象需要.value访问

单测

新建ref.spec.ts，添加第一个测试用例 happy path

it("happy path", () => {
  const original = ref(1);
  expect(original.value).toBe(1);
});

实现

新建文件 ref.ts

ref 函数接受的是一个基本类型的单值，需要将其转换成对象可以通过value来访问，可以使用class类，get语法将对象属性绑定到查询该属性时将被调用的函数。

class RefImpl {
  private _value: any;
  constructor(value) {
    this._value = value;
  }
  get value() {
    return this._value;
  }
}

export function ref(value) {
  return new RefImpl(value);
}

验证

执行单测yarn test ref

ref 包裹的对象是响应式对象

单测