Make getters in reactive cacheable

[Kolobok12309]

While using vue3, i try js classes for my data and some plugins(this works great with typescript and class-transformer), getters also works reactively, but not cached.
Example:

class Foo {
  message;
  
  constructor(message) {
    this.message = message;
  }
  
  get capitalized() {
    console.log('class getter');
    return this.message.toUpperCase();
  }
  
  setMessage(message) {
    this.message = message;
  }
}
  
const foo = reactive(new Foo('mess'));

Perhaps this may interfere with someone in the case of side effects in the getter, but I see no other reason not to implement caching

For setters same situation, but currently i don't use them

My first raw realization

function isGetter(target: Target, key: string | symbol) {
  const isSimpleObject = Object.getPrototypeOf(target) === Object.prototype;
  let isGetter = !!Object.getOwnPropertyDescriptor(target, key)?.get

  if (isSimpleObject || isGetter) return isGetter;

  let prototype = Object.getPrototypeOf(target);
  while(prototype !== Object.prototype) {
    const descriptor = Object.getOwnPropertyDescriptor(prototype, key);

    if (descriptor) return !!descriptor.get;

    prototype = Object.getPrototypeOf(prototype);
  }

  return false;
}
const getterMap = new WeakMap<Target, Map<string | symbol, ComputedRef>>();

function createGetter() {
  ...
  const targetIsGetter = isGetter(target, key);

  if (targetIsGetter) {
    let targetGetterMap = getterMap.get(target);

    if (!targetGetterMap) getterMap.set(target, targetGetterMap = new Map());

    let computedRef = targetGetterMap.get(key);

    if (!computedRef) {
      computedRef = computed(() => Reflect.get(target, key, receiver));

      targetGetterMap.set(key, computedRef);
    }

    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }

    return computedRef.value;
  }
  ...
}

It will probably be useful for someone too.

[hubvue]

if (!computedRef) {
  computedRef = computed(() => Reflect.get(target, key, receiver));
  targetGetterMap.set(key, computedRef);
}

Changes to target[key] in the code do not cause updates to the computed value.

Here it's just a read of the value and there is no performance penalty. In contrast, using computed collects dependencies and the whole process is much more complex than read value.

[Kolobok12309]

My realization very raw, currently i don't understand a lot of underhood logic.

I don’t really understand how this differs from comparing computed and methods in vue components, but it is possible that this will not give any significant increase in performance

[hubvue]

computedRef = computed(() => Reflect.get(target, key, receiver));

Assuming the above code works, the effectFn of computed is re-executed when target[key] is changed.

When computed is created effectFn collects dependencies on the reactive data it uses internally and re-executes effectFn when the reactive data changes to get the latest data, which is a much more complex process than fetching.

[liulinboyi]

In the computed's get will call the trackRefValue and has this condition self._dirty || !self._cacheable to judge whether caching is needed.

core/packages/reactivity/src/computed.ts

Lines 55 to 64 in a95554d

	get value() {
	// the computed ref may get wrapped by other proxies e.g. readonly() #3376
	const self = toRaw(this)
	trackRefValue(self)
	if (self._dirty || !self._cacheable) {
	self._dirty = false
	self._value = self.effect.run()!
	}
	return self._value
	}