实现Vue3 readonly，教你如何一步步重构

本文通过实现readonly方法，一步步展示重构的流程。

前言

readonly接受一个对象，返回一个原值的只读代理。

实现 Vue3 中readonly方法，先来看一下它的使用。

<script setup>
import { readonly } from "vue";

let user = {
  name: "wendZzoo",
  age: 18,
  address: {
    province: "jiangsu",
    city: "suzhou",
  },
};
const copyUser = readonly(user);

user.age = 20;
copyUser.age = 18;

user.address.city = "nanjing";
copyUser.address.city = "suzhou";
</script>

<template>
  {{ user }}
  {{ copyUser }}
</template>

readonly是原值的代理，当原值修改时候，readonly包裹的值也会被修改，但是修改readonly的值，控制台会有警告报错，且无法修改。

readonly是个代理

readonly的实现和reactive一样，只是它无法实现更新操作，意味着没有触发依赖，也就相当于不会收集依赖。

先来写一个核心逻辑的单测，新建readonly.spec.ts

import { readonly } from "../reactive";

it("happy path", () => {
  const original = { foo: 1, bar: { bar: 2 } };
  const wapper = readonly(original);

  expect(wapper).not.toBe(original);
  expect(wapper.foo).toBe(1);
});

在reactive.ts中导出readonly方法，

import { track, trigger } from "./effect";

export function reactive(raw) {
  return new Proxy(raw, {
    get: (target, key) => {
      let res = Reflect.get(target, key);
      track(target, key);
      return res;
    },
    set: (target, key, value) => {
      let res = Reflect.set(target, key, value);
      trigger(target, key);
      return res;
    },
  });
}

export function readonly(raw) {
  return new Proxy(raw, {
    get: (target, key) => {
      let res = Reflect.get(target, key);
      return res;
    },
    set: (target, key, value) => {
      return true;
    },
  });
}

执行单测yarn test readonly

重构

单测通过说明readonly方法的核心功能，返回一个代理，已经实现了。

但是代码中可以优化的地方有很多，让我们一步步重构，看看代码是怎么变成你不认识的样子。

抽离get函数

在reactive方法和readonly方法中，将重复的地方提取出来封装成函数。

function get(target, key) {
  let res = Reflect.get(target, key);
  track(target, key);
  return res;
}

reactive方法和readonly方法中get操作的唯一区别就是是否调用了track，为了复用get函数，可以将其封装成一个高阶函数，传入布尔值进行判断。

function createGetter(isReadonly = false) {
  return function get(target, key) {
    let res = Reflect.get(target, key);
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}

代码一致性

那为了保证代码的一致性，get已经抽离，set也做相应的抽离封装。

function createSetter() {
  return function set(target, key, value) {
    let res = Reflect.set(target, key, value);
    trigger(target, key);
    return res;
  };
}

重构到这儿，reactive.ts文件变成了如下这样：

import { track, trigger } from "./effect";
function createGetter(isReadonly = false) {
  return function get(target, key) {
    let res = Reflect.get(target, key);
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value) {
    let res = Reflect.set(target, key, value);
    trigger(target, key);
    return res;
  };
}
export function reactive(raw) {
  return new Proxy(raw, {
    get: createGetter(),
    set: createSetter(),
  });
}
export function readonly(raw) {
  return new Proxy(raw, {
    get: createGetter(true),
    set: (target, key, value) => {
      return true;
    },
  });
}

再次执行单测，验证重构是否破坏了原有功能，测试通过说明重构没有问题，继续下一步的重构。

抽离成单独文件

reactive方法和readonly方法中都存在get和set，那可以优化的点就是将这块逻辑抽离。单独新建一个文件baseHandler.ts

import { track, trigger } from "./effect";
function createGetter(isReadonly = false) {
  return function get(target, key) {
    let res = Reflect.get(target, key);
    if (!isReadonly) {
      track(target, key);
    }
    return res;
  };
}
function createSetter() {
  return function set(target, key, value) {
    let res = Reflect.set(target, key, value);
    trigger(target, key);
    return res;
  };
}
export const multableHandler = {
  get: createGetter(),
  set: createSetter(),
};
export const readonlyHandler = {
  get: createGetter(true),
  set: (target, key, value) => {
    return true;
  },
};

相应的，原本reactive.ts中代码修改成：

import { multableHandler, readonlyHandler } from "./baseHandler";
export function reactive(raw) {
  return new Proxy(raw, multableHandler);
}
export function readonly(raw) {
  return new Proxy(raw, readonlyHandler);
}

这儿发现 new Proxy重复，可以将这块逻辑单独封装成一个函数，让代码的语义化更好。

import { multableHandler, readonlyHandler } from "./baseHandler";
export function reactive(raw) {
  return createActiveObject(raw, multableHandler);
}
export function readonly(raw) {
  return createActiveObject(raw, readonlyHandler);
}
function createActiveObject(raw, baseHandler) {
  return new Proxy(raw, baseHandler);
}

缓存

回顾代码，是否还有优化的地方？

baseHandler.ts中，每次get，set都是创建一个函数，可以采用缓存，减少这样不必要的执行。

const get = createGetter();
const set = createSetter();
const readonlyGet = createGetter(true);
export const multableHandler = {
  get,
  set,
};
export const readonlyHandler = {
  get: readonlyGet,
  set: (target, key, value) => {
    return true;
  },
};

再次执行单测，验证重构是否破坏了原有功能。

返回警告报错

单测，jest.fn()模拟一个警告函数，当readonly值更新时，断言这个警告函数执行了。

it("warn when call set", () => {
  console.warn = jest.fn();
  const original = readonly({ foo: 1 });
  original.foo = 2;

  expect(console.warn).toHaveBeenCalled();
});

实现上很简单，就是在readonly的set方法里打印一下告警提示。

export const readonlyHandler = {
  get: readonlyGet,
  set: (target, key, value) => {
    console.warn(
      `Set operation on key ${key} failed: target is readonly`,
      target
    );
    return true;
  },
};