annil 1.0.0

package/src/api/SubComponent/index.ts

@@ -0,0 +1,204 @@
+import type { IfExtends } from "hry-types/src/Any/IfExtends";
+import type { EmptyObject } from "hry-types/src/Misc/EmptyObject";
+import type { RequiredKeys } from "hry-types/src/Object/RequiredKeys";
+import type { ExtractDocPrefix } from "../../types/GetComponentPrefix";
+import type { ReplacePrefix } from "../../types/ReplacePrefix";
+import type { ComponentDoc } from "../DefineComponent/ReturnType/ComponentDoc";
+
+import type { Func } from "hry-types/src/Misc/Func";
+import type {
+  WMCompLifetimes,
+  WMCompOtherOption,
+  WMCompPageLifetimes,
+  WMPageLifetimes,
+} from "../../types/OfficialTypeAlias";
+import type { RootComponentDoc } from "../RootComponent/RootComponentDoc";
+import type { GetSubComputedDoc } from "./SubComputed/GetSubComputedDoc";
+import type { SubComputedConstraint } from "./SubComputed/SubComputedConstraint";
+import type { SubComputedOption } from "./SubComputed/SubComputedOption";
+import type { SubDataConstraint } from "./SubData/SubDataConstraint";
+import type { SubDataOption } from "./SubData/SubDataOption";
+import type { SubEventsConstraint } from "./SubEvents/SubEventsConstraint";
+import type { SubEventsOption } from "./SubEvents/SubEventsOptions";
+import type { InheritConstraint } from "./SubInherit/SubInheritConstraint";
+import type { SubInstance } from "./SubInstance/SubInstance";
+import type { SubLifetimesOption } from "./SubLifetimes/SubLifetimesOption";
+import type { SubMethodsConstraint } from "./SubMethods/SubMethodsConstraint";
+import type { SubMethodsOption } from "./SubMethods/SubMethodsOption";
+import type { SubPageLifetimesOption } from "./SubPageLifetimes/SubPageLifetimesOption";
+import type { CreateSubComponentDoc } from "./SubReturnType/CreateSubComponentDoc";
+import type { SubStoreConstraint } from "./SubStore/SubDataConstraint";
+import type { SubStoreOption } from "./SubStore/SubStoreOption";
+import type { SubWatchOption } from "./SubWatch/SubWatchOption";
+
+type Options<
+  RootDoc extends RootComponentDoc,
+  IsPage extends boolean,
+  CurrentCompDoc extends ComponentDoc,
+  Prefix extends string,
+  AllRootDataDoc extends object,
+  TInherit extends object,
+  TSubData extends object,
+  TSubStore extends object,
+  TSubComputed extends object,
+  TEvents extends object,
+  TSubMethods extends object,
+  InheritDoc extends object,
+  SubDataDoc extends object,
+  SubStoreDoc extends object,
+  SubComputedDoc extends object,
+  SubEventsDoc extends object,
+  SubMethodsDoc extends object,
+> =
+  & { inherit?: TInherit }
+  & SubDataOption<
+    TSubData,
+    Exclude<keyof CurrentCompDoc["properties"], (keyof InheritDoc)>,
+    Prefix
+  >
+  & SubStoreOption<
+    TSubStore,
+    Exclude<keyof CurrentCompDoc["properties"], (keyof (InheritDoc & SubDataDoc))>,
+    Prefix
+  >
+  & SubComputedOption<
+    TSubComputed,
+    // AllRootDataDoc & SubDataDoc & SubDataDoc & SubComputedDoc,
+    // 合法的配置
+    Omit<CurrentCompDoc["properties"], (keyof (InheritDoc & SubDataDoc & SubStoreDoc))>
+  >
+  & SubEventsOption<TEvents, SubEventsDoc, keyof SubEventsConstraint<CurrentCompDoc>>
+  & SubMethodsOption<TSubMethods, Prefix, keyof CurrentCompDoc["customEvents"]>
+  & SubPageLifetimesOption<IsPage, RootDoc["properties"] & {}>
+  & SubLifetimesOption
+  & SubWatchOption<
+    & SubComputedDoc
+    & SubDataDoc
+    & AllRootDataDoc
+    & SubStoreDoc
+  >
+  & Partial<Omit<WMCompOtherOption, "pageLifetimes">>
+  & ThisType<
+    SubInstance<
+      SubMethodsDoc & RootDoc["methods"],
+      TSubData,
+      AllRootDataDoc & SubDataDoc & SubComputedDoc & SubStoreDoc,
+      RootDoc["customEvents"] & {},
+      SubStoreDoc
+    >
+  >;
+
+type SubComponentConstructor<
+  TRootDoc extends RootComponentDoc,
+  TOriginalCompDoc extends ComponentDoc,
+  // 补充的前缀
+  TSupplementalPrefix extends string = "",
+  IsPage extends boolean = TRootDoc["isPage"] extends true ? true : false,
+  // 重构子组件的前缀
+  CurrentPrefix extends string = `${ExtractDocPrefix<TOriginalCompDoc>}${Capitalize<TSupplementalPrefix>}`,
+  // 更新原始文档的前缀为Prefix
+  CurrentCompDoc extends ComponentDoc = IfExtends<
+    TSupplementalPrefix,
+    "",
+    TOriginalCompDoc,
+    ReplacePrefix<TOriginalCompDoc, CurrentPrefix>
+  >,
+  AllRootDataDoc extends object =
+    & Required<TRootDoc["properties"]>
+    & TRootDoc["data"]
+    & TRootDoc["computed"],
+> = {
+  <
+    TInherit extends InheritConstraint<AllRootDataDoc, CurrentCompDoc>,
+    TSubData extends SubDataConstraint<Omit<Required<CurrentCompDoc["properties"]>, keyof InheritDoc>>,
+    TSubStore extends SubStoreConstraint<Omit<Required<CurrentCompDoc["properties"]>, keyof (InheritDoc & SubDataDoc)>>,
+    TEvents extends SubEventsConstraint<CurrentCompDoc>,
+    TSubComputed extends SubComputedConstraint<
+      Omit<Required<CurrentCompDoc["properties"]>, keyof (InheritDoc & SubDataDoc & SubStoreDoc)>
+    >,
+    TSubMethods extends SubMethodsConstraint = {},
+    InheritDoc extends object = IfExtends<InheritConstraint<AllRootDataDoc, CurrentCompDoc>, TInherit, {}, TInherit>,
+    SubDataDoc extends object = IfExtends<
+      SubDataConstraint<Omit<Required<CurrentCompDoc["properties"]>, keyof InheritDoc>>,
+      TSubData,
+      {},
+      TSubData
+    >,
+    SubStoreDoc extends object = IfExtends<
+      SubStoreConstraint<Omit<Required<CurrentCompDoc["properties"]>, keyof (InheritDoc & SubDataDoc)>>,
+      TSubStore,
+      {},
+      { [k in keyof TSubStore]: ReturnType<TSubStore[k] & {}> }
+    >,
+    // 无效的计算
+    SubComputedDoc extends object = IfExtends<
+      SubComputedConstraint<
+        Omit<Required<CurrentCompDoc["properties"]>, keyof (InheritDoc & SubDataDoc & SubStoreDoc)>
+      >,
+      TSubComputed,
+      {},
+      GetSubComputedDoc<TSubComputed>
+    >,
+    SubEventsDoc extends object = IfExtends<
+      SubEventsConstraint<CurrentCompDoc>,
+      TEvents,
+      {},
+      TEvents
+    >,
+    SubMethodsDoc extends object = TSubMethods,
+    // 缺失的必传字段(配置中inhrit,data,computed的字段不包含的必传字段)
+    MissingRequiredField extends PropertyKey = Exclude<
+      RequiredKeys<CurrentCompDoc["properties"] & {}>,
+      keyof (
+        & InheritDoc
+        & SubDataDoc
+        & SubStoreDoc
+        & SubComputedDoc
+      )
+    >,
+  >(
+    options: Options<
+      TRootDoc,
+      IsPage,
+      CurrentCompDoc,
+      CurrentPrefix,
+      AllRootDataDoc,
+      TInherit,
+      TSubData,
+      TSubStore,
+      TSubComputed,
+      TEvents,
+      TSubMethods,
+      InheritDoc,
+      SubDataDoc,
+      SubStoreDoc,
+      SubComputedDoc,
+      SubEventsDoc,
+      SubMethodsDoc
+    >,
+  ): CreateSubComponentDoc<TOriginalCompDoc["customEvents"] & {}, SubEventsDoc, MissingRequiredField>;
+};
+
+/**
+ * 子组件构建函数
+ * @returns `(options:) => SubComponentDoc`
+ */
+export function SubComponent<
+  RootDoc extends RootComponentDoc,
+  CompDoc extends ComponentDoc,
+  Prefix extends string = "",
+>(): IfExtends<EmptyObject, CompDoc, (opt: EmptyObject) => never, SubComponentConstructor<RootDoc, CompDoc, Prefix>> {
+  return ((options: any) => options) as any;
+}
+
+// 相比与 export type TrivialOption = Options<{},...>,更直观字段和类型,但断耦合,注意类型是否正确.这是为最终生成官方Component API 的options参数而生。
+export type SubComponentOptions = {
+  inhrit?: string;
+  data?: Record<string, unknown>;
+  computed?: Record<string, Func>;
+  events?: Record<string, Func>;
+  methods?: Record<string, Func>;
+  watch?: Record<string, Func>;
+  lifetimes?: WMCompLifetimes["lifetimes"];
+  pageLifetimes?: Partial<WMCompPageLifetimes & { load: Func } & WMPageLifetimes>;
+};

package/src/api/navigateTo.ts

@@ -0,0 +1,66 @@
+import type { IfEquals } from "hry-types/src/Any/IfEquals";
+import type { IfExtends } from "hry-types/src/Any/IfExtends";
+import type { NoInfer } from "hry-types/src/Generic/NoInfer";
+import type { WMNavigateToOption } from "../types/OfficialTypeAlias";
+import type { RequiredKeys } from "../types/RequiredKeys";
+import { INNERMARKER } from "../utils/InnerMarker";
+import type { PageDoc } from "./DefineComponent/ReturnType/PageDoc";
+
+type NavigateToOption<T extends PageDoc> =
+  & {
+    url: T["path"];
+  }
+  & IfExtends<
+    unknown,
+    T["properties"],
+    unknown,
+    IfEquals<
+      RequiredKeys<NonNullable<T["properties"]>>,
+      never,
+      {
+        data?: T["properties"];
+      },
+      {
+        data: T["properties"];
+      }
+    >
+  >
+  & Omit<WMNavigateToOption, "url">;
+
+/**
+ *  对象中可以使用 `"; / ? : @ & = + $ `, #"做为数据的一部分
+ */
+function _encodeURIComponent(
+  option: Omit<WMNavigateToOption, "url"> & { url: string; data: object },
+): WechatMiniprogram.NavigateToOption {
+  const result: WMNavigateToOption = {
+    url: `${option.url}?${INNERMARKER.url}=${
+      encodeURIComponent(
+        JSON.stringify(option.data),
+      )
+    }`,
+  };
+
+  Reflect.deleteProperty(option, "url");
+
+  Reflect.deleteProperty(option, "data");
+
+  return Object.assign(result, option);
+}
+
+/**
+ * 页面onload参数中接受的数据值是传递的url解析后的字符串。例如:A页面通过`wx.navigateTo({url:'/pages/test/test?num=123&obj={"name":"zhao"}'})`
+ * test页面onLoad(data)的参数data接受内容为` data = {num:"123",obj:"{"name":"zhao"}"}`即默认的url传的数据值为字符串,需要在接收时自行解析(JSON.parse)。且url采取ASCII编码只能接受0x20-0x7e区间的符号。无法使用一些特殊符号 如 ` :/?#[]@!$&'()*+,;= `。
+ * navigateTo API 为 wx.navigateTo的语法糖,增加了data字段,最终的url数据拼接了通过encodeURIComponent编码(支持默认忽略的特殊符号)的data字段,在跳转页面的onload中通过decodeURIComponent解析url赋值给实例的data对象。为求使用时更加方便(无需对参数data解析再赋值)。且有ts类型提示。
+ */
+export function navigateTo<TPageDoc extends PageDoc = never>(
+  option: NoInfer<NavigateToOption<TPageDoc>>,
+) {
+  if (!option["data"]) {
+    return wx.navigateTo(option);
+  } else {
+    return wx.navigateTo(
+      _encodeURIComponent(option as NavigateToOption<TPageDoc> & { data: object }),
+    );
+  }
+}

package/src/behaviors/BComputedAndWatch/IsPage.ts

@@ -0,0 +1,5 @@
+import type { ComponentInstance, PageInstance } from "../../api/RootComponent/Instance/RootComponentInstance";
+
+export function isPage(Ins: ComponentInstance | PageInstance): Ins is PageInstance {
+  return typeof (Ins as PageInstance).route === "string";
+}

package/src/behaviors/BComputedAndWatch/data-tracer.ts

@@ -0,0 +1,63 @@
+import type { ComputedDependence } from "./initComputed";
+
+export function deepProxy(
+  data: object,
+  dependences: ComputedDependence[],
+  basePath: string[] = [],
+): object {
+  const handler = {
+    set() {
+      throw Error("计算属性中不可以改变data对象的值");
+    },
+    get(target: object, prop: string) {
+      // // 得到原始的对象 在unwrap时使用
+      // console.log(target, prop);
+
+      if (prop === "__rawObject__") return target;
+
+      const val = target[prop];
+
+      // console.log("获取依赖", prop, val);
+
+      // 依赖长度不为0时 去重
+      if (basePath.length !== 0) {
+        // 依赖去重
+        const lastDependences = dependences[dependences.length - 1]; // 倒数第一个是当前依赖。2022 at(-1)
+        // 只留最后一个路径。比如  return this.data.obj.user.name  得到的是最后1个路径 ['obj','user','name'] 减少无效依赖,提高性能。 而非3个  ['obj'], ['obj','user'],['obj','user','name']
+        if (lastDependences.paths.toString() === basePath.toString()) {
+          // console.log('删除', lastDependences)
+          dependences.pop();
+        }
+      }
+      const curPath = basePath.concat(prop);
+
+      dependences.push({ paths: curPath, val: unwrap(val) });
+
+      // 自身方法或原型属性不代理
+      if (!Object.prototype.hasOwnProperty.call(target, prop) || typeof val === "function") {
+        // 原型链上的属性不代理,函数加bind。如 this.data.arr.slice()  this.data.arr.forEach(...)
+        return typeof val === "function" ? val.bind(target) : val;
+      }
+      // 非对象不代理
+      if (typeof val !== "object" || val === null) return val;
+
+      return deepProxy(val, dependences, curPath);
+    },
+  };
+
+  return new Proxy(data, handler);
+}
+
+export function unwrap(wrapped: any): unknown {
+  // 非引用值 直接返回
+  if (typeof wrapped !== "object" || wrapped === null) {
+    return wrapped;
+  }
+  // 是引用值 取原值
+  const originalValue = wrapped.__rawObject__;
+  if (originalValue) {
+    wrapped = originalValue;
+  }
+
+  return wrapped;
+}

package/src/behaviors/BComputedAndWatch/index.ts

@@ -0,0 +1,122 @@
+import type { Func } from "hry-types/src/Misc/Func";
+import type { ComponentOptions } from "../../api/DefineComponent";
+import { deepClone } from "../../utils/deepClone";
+import { deleteProtoField } from "../../utils/deleteProtoField";
+import { initWatchOldValue } from "../../utils/initWatchOldValue";
+import { isEmptyObject } from "../../utils/isEmptyObject";
+import { initComputed } from "./initComputed";
+import { isEqual } from "./isEqual";
+import { isPage } from "./IsPage";
+import type { Instance } from "./types";
+/**
+ * 实现
+ * 1. 计算属性初始化在attached之后(前版本在beforeCreate)
+ * 2. 通过observers.**(前版本劫持setData)更新计算属性。
+ * 原因
+ * 1. 之前版本放在beforeCreate好处是符合正常思维,即组件建立后(created)包含计算属性的data就应该都存在了。
+ * 但由于properties字段数据实际有效是发生在attached之后。所以之前版本计算属性在挂载到上级组件时,依赖properties的计算属性更新有可能是无意义的。因为上级组件传递的properties有可能由它的上级组件传递而来。根本愿意是组件实例挂载是由内而外,而properties是由外到内传递数据。虽然这些无意义更新只发生在一次(onload之前).
+ * 2 当properties中有内部字段时(例如设置了pureDataPattern: /^_/,),无法通过设置properties下的observer属性来获知属性更新通知,从而无法劫持setData。才导致有这个最新版本出现。
+ * 3. 子组件计算属性若依赖properties字段,当子组件挂载到父组件时,就会触发observers.**字段,从而进行一次无效的计算属性更新。解决方案是：实例默认一个__computedStatus__字段,当observers.**变化时,如果__computedStatus__为'初始化中'(表示计算属性还未初始化完毕),就不会进行计算属性更新。当attached周期后(计算属性初始化完毕)把__computedStatus__变为'待更新',再次触发observers.**字段则更新计算属性。
+ */
+/**
+ * computed初始化值在组件建立后,这样能保证计算属性依赖properties字段时,properties必传字段一定有值,减少计算属性代码(不必考虑properties无值时的情况)。坏处是增加了组件初始化时运行的代码量。
+ */
+
+export const BComputedAndWatch = Behavior({
+  definitionFilter(options: ComponentOptions) {
+    const computedConfig = options.computed;
+
+    // computed handle
+    if (computedConfig && !isEmptyObject(computedConfig)) {
+      const methodsConfig = options.methods ||= {};
+
+      // 把计算属性配置保留在methods的__computedConfig__字段下带入到组件实例中。
+      methodsConfig.__computedConfig__ = () => computedConfig;
+
+      const observersConfig = options.observers ||= {};
+      // 通过observers加入`**`字段来触发计算属性更新
+      const originalFunc = observersConfig["**"] as Func | undefined;
+
+      observersConfig["**"] = function(this: Instance): undefined {
+        const computedStatus = this.__computedStatus__;
+        switch (computedStatus) {
+          case undefined:
+            // 1 触发来自attach时或没有计算属性时
+            originalFunc && originalFunc.call(this);
+
+            break;
+          case "初始化中":
+            // 2 触发来自计算属性初始化时的setData,什么都不需要做。 初始化后__computedStatus__变为待更新
+
+            break;
+          case "待更新":
+            // 3. 触发来自attached后的setData或properties更新
+            {
+              const isUpdated = this.__computedUpdater__();
+              if (isUpdated) {
+                // 更新了会再次触发自身转到 4
+                this.__computedStatus__ = "更新完毕";
+              } else {
+                // 无需更新计算属性
+                originalFunc && originalFunc.call(this);
+              }
+            }
+            break;
+          case "更新完毕":
+            {
+              // 4 来自计算属性更新后的自身回调
+              // console.log("来自计算属性更新后的自身回调");
+              this.__computedStatus__ = "待更新";
+
+              originalFunc && originalFunc.call(this);
+            }
+            break;
+        }
+      };
+    }
+
+    // watch handle
+    const watchConfig = options.watch;
+    if (watchConfig && !isEmptyObject(watchConfig)) {
+      const methodsConfig = options.methods ||= {};
+
+      // 把watch配置保留在methods的__watchConfig__字段下带入到组件实例中。
+      methodsConfig.__watchConfig__ = () => watchConfig;
+
+      const observersConfig = options.observers ||= {};
+      for (const key in watchConfig) {
+        const watchHadle = watchConfig[key];
+
+        observersConfig[key] = function(this: Instance, newValue: unknown) {
+          const watchOldValue = this.__watchOldValue__!;
+          const oldValue = watchOldValue[key];
+          // 当watch对象的子属性时,有可能对象为null(properties默认值)
+          if ((newValue === undefined) || isEqual(newValue, oldValue)) return;
+          watchOldValue[key] = deepClone(newValue);
+
+          watchHadle.call(this, newValue, oldValue);
+        };
+      }
+    }
+  },
+  lifetimes: {
+    created(this: Instance) {
+      // 初始化watch 生成OldValue
+      const watchConfig = this.__watchConfig__?.();
+
+      deleteProtoField(this, "__watchConfig__");
+
+      if (watchConfig) {
+        // 此时计算属性还未初始化,properties还未第一次传入
+        this.__watchOldValue__ = initWatchOldValue.call(this, watchConfig);
+      }
+    },
+    attached(this: Instance) {
+      if (!isPage(this)) {
+        // 组件此时properties已传入
+        initComputed.call(this);
+      }
+      // else 页面在onLoad时传入properties 计算属性初始化逻辑通过onLoadHijack函数完成
+    },
+  },
+});

package/src/behaviors/BComputedAndWatch/initComputed.ts

@@ -0,0 +1,166 @@
+// import type { ComponentInstance } from "../../api/RootComponent/Instance/RootComponentInstance";
+// import type { IsDependOnOthers } from "./data-tracer";
+
+import type { Func } from "hry-types/src/Misc/Func";
+import { computedUpdater } from "../../utils/computedUpdater";
+import { deleteProtoField } from "../../utils/deleteProtoField";
+import { deepProxy, unwrap } from "./data-tracer";
+import type { ComputedCache, Instance } from "./types";
+export type ComputedDependence = { paths: string[]; val: unknown };
+
+type ComputedInfo = {
+  dependences: ComputedDependence[];
+  value: unknown;
+};
+
+/**
+ * 如果依赖列表某项的首个字段值为undefined并且字段为其他计算属性字段 返回false(即被依赖的计算字段写在了依赖他的计算字段后面), 否则返回ComputedInfo。
+ */
+function isValidDependences(dependences: ComputedDependence[], computedKeys: string[]): boolean {
+  for (const { paths: path, val } of dependences) {
+    // 引用值为undefined时
+    // console.log(path[0]);
+    if (val === undefined && computedKeys.includes(path[0])) {
+      return false;
+    }
+  }
+
+  return true; // 依赖有效
+}
+
+export function getComputedInfo(
+  this: Instance,
+  computedKeys: string[],
+  computedFunc: Func,
+  key: string,
+): false | ComputedInfo {
+  // 建立当前计算字段的依赖
+  const dependences: ComputedDependence[] = [];
+  let initValue: unknown;
+  try {
+    initValue = computedFunc.call({
+      data: deepProxy(this.data, dependences),
+    });
+  } catch (error) {
+    // 为js开发考虑使用了 this.data.xxx.age 当xxx为undefined时
+    if (!isValidDependences(dependences, computedKeys)) {
+      // 情况2 依赖了未初始化的计算属性的子属性(会报错) 见computed测试文件
+      return false;
+    }
+    // 其他错误正常报错
+    throw error;
+  }
+  if (isValidDependences(dependences, computedKeys)) {
+    // 有效的依赖
+    initValue = unwrap(initValue);
+
+    this.setData({
+      [key]: initValue,
+    });
+
+    return { dependences, value: initValue };
+  } else {
+    // 情况1 依赖了其他未初始化的计算属性(不报错) 见computed测试文件
+    return false;
+  }
+}
+
+/**
+ * 依赖去重
+ * @example
+ * ```ts
+ *  const dependences = [{path:['a','b']}, {path:['a','b','c']}, {path:['d','e']}, {path:['d']}]
+ *  const result = uniqueDependences(dependences)
+ *  // result = [{path:['a','b'] } ,{ path:['d'] }]
+ * ```
+ */
+function uniqueDependences(dependences: ComputedDependence[]): ComputedDependence[] {
+  if (dependences.length === 1) return dependences;
+
+  for (let f = 0; f < dependences.length; f++) {
+    const firstPath = dependences[f].paths.join(".") + ".";
+    for (let i = f + 1; i < dependences.length; i++) {
+      const curPath = dependences[i].paths.join(".") + ".";
+      // console.log(firstPath,curPath)
+      if (firstPath.startsWith(curPath)) {
+        // console.log('删除:',f)
+        // 例如 path[0] = 'a.b.c',curPath = 'a.b'
+        dependences.splice(f, 1);
+
+        return uniqueDependences(dependences);
+      }
+      if (curPath.startsWith(firstPath)) {
+        // console.log('删除:',i)
+        // 例如 curPath = 'a.b.c' path[0] = 'a.b',
+        dependences.splice(i, 1);
+
+        return uniqueDependences(dependences);
+      }
+    }
+  }
+
+  return dependences;
+}
+/**
+ * 初始化计算属性配置返回计算属性缓存
+ * @param computedConfig - 计算属性配置
+ * @param uninitedkeys - 未初始的计算属性keys
+ * @param computedCache - 计算属性缓存默认=`{}`
+ * @returns 计算属性缓存
+ */
+function _initComputed(
+  this: Instance,
+  computedConfig: Record<string, Func>,
+  uninitedkeys: string[], //
+  computedCache: ComputedCache = {},
+): ComputedCache {
+  // 收集依赖
+  for (const key of uninitedkeys) {
+    const computedInfo = getComputedInfo.call(this, uninitedkeys, computedConfig[key], key);
+
+    // 去除完成的依赖key
+    uninitedkeys = uninitedkeys.filter(ele => ele !== key);
+
+    if (computedInfo === false) {
+      // 把当前依赖不正确的key放到后面去
+      uninitedkeys.push(key);
+    } else {
+      computedCache[key] = {
+        // 去重 避免 如: ` age(){ return this.data.xxx.num + this.data.xxx.str + this.data.xxx} ` 造成的多个依赖相同情况。应就要一个 xxx
+        dependences: uniqueDependences(computedInfo.dependences),
+        method: computedConfig[key],
+        value: computedInfo.value, // 为了watch的oldValue
+      };
+    }
+  }
+  // 看uninitedkey是否未空，空表示所有依赖收集完毕直接返回
+  if (uninitedkeys.length === 0) {
+    return computedCache;
+  }
+
+  // uninitedkey不为空,递归
+  return _initComputed.call(this, computedConfig, uninitedkeys, computedCache);
+}
+export function initComputed(this: Instance) {
+  const computedConfig = this.__computedConfig__?.();
+
+  deleteProtoField(this, "__computedConfig__");
+
+  if (computedConfig) {
+    // 实例加入 __computedUpdateStatus__ 提高性能
+    this.__computedStatus__ = "初始化中";
+
+    // 初始化计算属性(返回缓存)
+    this.__computedCache__ = _initComputed.call(
+      this,
+      computedConfig,
+      Object.keys(computedConfig),
+    );
+
+    // 给原型上加入__computedUpdater__方法 在observers下的'**'配置中触发
+
+    this.__computedUpdater__ = computedUpdater.bind(this);
+
+    this.__computedStatus__ = "待更新";
+  }
+}

package/src/behaviors/BComputedAndWatch/isEqual.ts

@@ -0,0 +1,26 @@
+/**
+ * 深度判断2个值是否相等,NaN与NaN不等,+0与-0相等。
+ */
+export function isEqual(value: unknown, other: unknown) {
+  if (value === other) {
+    return true;
+  }
+  // value和other有一个为null或不是对象 一定不相等
+  if (typeof value !== "object" || value === null || typeof other !== "object" || other === null) {
+    return false;
+  }
+  const keys1 = Object.keys(value);
+  const keys2 = Object.keys(other);
+  // 对象类型长度不等，一定不相等
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  // 递归比较存在的相同key是否相等
+  for (const key of keys1) {
+    if (!keys2.includes(key) || !isEqual(value[key], other[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/behaviors/BComputedAndWatch/types.ts

@@ -0,0 +1,28 @@
+import type { Func } from "hry-types/src/Misc/Func";
+import type { ComponentInstance, PageInstance } from "../../api/RootComponent/Instance/RootComponentInstance";
+import type { ComputedDependence } from "./initComputed";
+
+export type InstanceCustomFields = {
+  __pendingSetData__?: object | null;
+  __storeConfig__?: () => Record<string, () => unknown>;
+  __computedStatus__?: "初始化中" | "待更新" | "更新完毕";
+  __computedUpdater__: Func;
+  __computedConfig__?: () => Record<string, Func>;
+  __computedCache__?: ComputedCache;
+  __watchOldValue__?: WatchOldValue;
+  __watchConfig__?: () => Record<string, Func>;
+  disposer: Record<string, Func>;
+};
+
+export type Instance = (ComponentInstance | PageInstance) & InstanceCustomFields;
+
+export type ComputedCache = Record<
+  string,
+  {
+    dependences: ComputedDependence[];
+    method: Func;
+    value: unknown;
+  }
+>;
+
+export type WatchOldValue = Record<string, unknown>;