关于增强 @formily/reactive-vue 桥接能力的讨论

[MisicDemone]

当前 @formily/reactive-vue 仅提供了 @formily/reactive 到 vue 的渲染桥接(observer)，即自动收集 render 函数中的依赖，再响应依赖变更触发重新渲染。但在使用 composition-api 时，仅提供 observer 包装函数有时是不够的。在接入一下其他使用formily-reactive能力定义的模型（如designable）时，在封装hooks时可能会写大量桥接代码。

// obsRef: Ref<observable>
const temp = shallowRef()
let dispose: () => void
watch(() => props.field, () => {
  dispose?.()
  dispose = autorun(() => temp.value = obsRef.value.a)
}, { immediate: true })
onBeforeUnmount(() => dispose?.())
return temp

如果能在底层实现这些桥接逻辑，使用者只需要按平常使用 composition-api 的习惯去开发，则会省心很多。这里贴一个自己的实现，大家可以看下是否需要集成进 @formily/reactive-vue ，以及试用或者帮忙捉捉虫？

import { computed as vueComputed, ComputedGetter, ComputedRef, watch as vueWatch, watchEffect as VueWatchEffect, shallowRef, onBeforeUnmount } from 'vue-demi';
import { autorun, reaction } from '@formily/reactive';
export * from 'vue-demi';

export const computed = <T>(calc: ComputedGetter<T>): ComputedRef<T> => {
  const temp = shallowRef<T>();
  let dispose: () => void;
  onBeforeUnmount(() => dispose?.());
  return vueComputed<T>((ctx?: any) => {
    dispose?.();
    dispose = autorun(() => temp.value = calc(ctx));
    return temp.value as T;
  });
};

type Watch = typeof vueWatch
export const watch = (deps: Parameters<Watch>[0], callback: Parameters<Watch>[1], options?: Parameters<Watch>[2]): ReturnType<Watch> => {
  if (Array.isArray(deps)) {
    const disposes = deps.map((dep, i) => {
      if (typeof dep === 'function') {
        const newVs: unknown[] = [];
        const oldVs: unknown[] = [];
        return reaction(dep, (n, o) => {
          newVs[i] = n;
          oldVs[i] = o;
          callback(newVs, oldVs, onBeforeUnmount);
        });
      }
    }).filter(item => item !== undefined);
    onBeforeUnmount(() => disposes.forEach(dispose => dispose?.()));
  } else if (typeof deps === 'function') {
    const dispose = reaction(deps as () => unknown, (n, o) => callback(n as any, o as any, onBeforeUnmount));
    onBeforeUnmount(() => dispose?.());
  }
  return vueWatch(deps, callback, options);
};

type WatchEffect = typeof VueWatchEffect
export const watchEffect: WatchEffect = (effect: Parameters<WatchEffect>[0], options: Parameters<WatchEffect>[1]): ReturnType<WatchEffect> => {
  let dispose: () => void;
  return VueWatchEffect((onInvalidate) => {
    dispose = autorun(() => effect(onInvalidate));
    onInvalidate(dispose);
  }, options);
};

[qq1037305420]

@MisicDemone 我觉得这个挺好的，是不是考虑合并进去？
现在有不少场景我都是把你这段代码复制到项目里面引用的

[qq1037305420]

目前没发现什么bug