目标

使用 proxyRefs 后，可以省略 ref 中的 .value，Vue3 中 template 就调用到这个功能

  1. it('proxyRefs', () => {
  2.   const user = {
  3.     age: ref(10),
  4.     name: 'xiaohong',
  5.   };
  7.   const proxyUser = proxyRefs(user);
  8.   expect(user.age.value).toBe(10);
  9.   expect(proxyUser.age).toBe(10);
  10.   expect(proxyUser.name).toBe('xiaohong');
  12.   proxyUser.age = 20;
  13.   expect(proxyUser.age).toBe(20);
  14.   expect(user.age.value).toBe(20);
  16.   proxyUser.age = ref(10);
  17.   expect(proxyUser.age).toBe(10);
  18.   expect(user.age.value).toBe(10);
  19. });

实现

  1. export function proxyRefs(objectWithRefs) {
  2.   return new Proxy(objectWithRefs, {
  3.     get(target, key) {
  4.       return unRef(Reflect.get(target, key));
  5.     },
  7.     set(target, key, value) {
  8.       // target[key] 之前的值是 ref 对象，更新的值不是 ref 对象
  9.       if (isRef(target[key]) && !isRef(value)) {
  10.         // 把更新值赋于 ref 对象 .value
  11.         return (target[key].value = value);
  12.       } else {
  13.         return Reflect.set(target, key, value);
  14.       }
  15.     },
  16.   });
  17. }