带你轻松实现vue3源码之readonly

什么是readonly

在vue3中，readonly是一个只读的响应式对象，它与reactive对象非常相似，都是通过proxy来实现的。但是，readonly对象有一个重要的区别：它不能被修改。这意味着，你不能使用$set()方法来修改readonly对象中的属性，也不能直接赋值来修改属性值。

readonly的原理

readonly的原理与reactive非常相似，都是通过proxy来实现的。但是，readonly对象在创建时，会将proxy的set()方法设置为不可写，这样就无法通过$set()方法来修改readonly对象中的属性。

readonly的使用场景

readonly对象通常用于需要保持不变的数据，例如，表单中的输入值、URL参数等。通过使用readonly对象，可以确保这些数据不会被意外修改。

如何实现readonly

实现readonly非常简单，只需要在创建proxy对象时，将set()方法设置为不可写即可。下面是一个实现readonly的例子：

const readonly = new Proxy(obj, {
  get(target, property) {
    return target[property];
  },
  set(target, property, value) {
    throw new Error("Cannot modify readonly object");
  }
});

readonly的单测

为了确保readonly的正确性，我们可以编写一些单测来对其进行测试。下面是一个测试readonly的例子：

describe("readonly", () => {
  it("should be immutable", () => {
    const readonly = new Proxy({}, {
      get(target, property) {
        return target[property];
      },
      set(target, property, value) {
        throw new Error("Cannot modify readonly object");
      }
    });

    readonly.foo = "bar";

    expect(readonly.foo).toBe("bar");

    try {
      readonly.foo = "baz";
      fail("Expected an error to be thrown");
    } catch (e) {
      expect(e).toBeInstanceOf(Error);
      expect(e.message).toBe("Cannot modify readonly object");
    }
  });
});

总结

readonly是一个只读的响应式对象，它与reactive对象非常相似，都是通过proxy来实现的。readonly对象不能被修改，因此通常用于需要保持不变的数据。实现readonly非常简单，只需要在创建proxy对象时，将set()方法设置为不可写即可。为了确保readonly的正确性，我们可以编写一些单测来对其进行测试。