annil 1.3.0-dev.202312100 → 1.4.0

package/src/api/DefineComponent/collectOptionsForComponent.ts

@@ -1,8 +1,7 @@
 import type { Func } from "hry-types/src/Misc/_api";
 import { BBeforeCreate } from "../../behaviors/BbeforeCreated";
 import { BComputedAndWatch } from "../../behaviors/BComputedAndWatch";
-import { initComputed } from "../../behaviors/BComputedAndWatch/initComputed";
-import type { Instance } from "../../behaviors/BComputedAndWatch/types";
+import type { ComputedCache, Instance } from "../../behaviors/BComputedAndWatch/types";
 import { BStore } from "../../behaviors/BStore";
 import type { WMComponent } from "../../types/OfficialTypeAlias";
 import { INNERMARKER } from "../../utils/InnerMarker";
@@ -20,6 +19,7 @@ import type { PageInstance } from "../RootComponent/Instance/RootComponentInstan
 import type { LifetimesConstraint } from "../RootComponent/Lifetimes/LifetimesConstraint";
 import type { MethodsConstraint } from "../RootComponent/Methods/MethodsConstraint";
 import type { PageLifetimesOption } from "../RootComponent/PageLifetimes/PageLifetimesOption";
+import type { PropertiesConstraint } from "../RootComponent/Properties/PropertiesConstraint";
 import type { StoreConstraint } from "../RootComponent/Store/StoreConstraint";
 import type { SubComponentTrueOptions } from "../SubComponent";
 import type { DefineComponentOption } from ".";
@@ -33,18 +33,21 @@ export type FuncOptions = Record<"pageLifetimes" | "lifetimes" | "watch", Record
  * 最终传入原生Component的配置项
  */
 export type FinalOptionsOfComponent = {
+  data: DataConstraint;
+  observers: Record<string, Func>;
+  behaviors: string[];
+  methods: MethodsConstraint & {
+    __computedInitCache__?: () => ComputedCache;
+  };
   isPage?: boolean;
   options?: WMComponent.Options;
-  properties?: Record<string, any>;
-  data?: DataConstraint;
+  properties?: PropertiesConstraint;
   store?: StoreConstraint;
   computed?: ComputedConstraint;
-  observers?: Record<string, Func>;
-  behaviors?: string[];
-  methods?: MethodsConstraint;
   watch?: Record<string, Func>;
   lifetimes?: LifetimesConstraint;
-} & PageLifetimesOption<false, object>;
+  pageLifetimes?: PageLifetimesOption<false, object>["pageLifetimes"];
+};
 
 /**
  * 原生Component会对传入的对象字段匹配的properties字段setData赋值。不符合字段或Page时不会赋值。
@@ -60,7 +63,7 @@ function onLoadReceivedDataHandle(
 ) {
   const innerData: string | undefined = option[INNERMARKER.url];
 
-  // 情况1为undefined,2为INNERMARKER.url有值但不是本身,说明没有组件中的写了load(因为组件的load提前解析这个参数),3所以innerData等于 INNERMARKER.url即有组件配置了load(提前解析了)
+  // 情况1为undefined,2为INNERMARKER.url有值但不是本身,说明是老框架。3所以innerData等于 INNERMARKER.url即有组件配置了load(新框架在pageLifetimes.load中提前解析了)
   if (innerData === undefined) return;
   if (innerData !== INNERMARKER.url) {
     // 需要情况2 需要解析
@@ -105,15 +108,15 @@ function loadReceivedDataHandle(
   option: Record<typeof INNERMARKER.url, string>,
 ) {
   const innerData: string | undefined = option[INNERMARKER.url];
-  // 未使用自定义的navigateTo 或者在之前的load中已经被解析过了
-  if (innerData === undefined || innerData == INNERMARKER.url) return;
+  // 未使用自定义的navigateTo
+  if (innerData === undefined) return;
+  // 使用navigateTo API
   const decodeOption = JSON.parse(decodeURIComponent(innerData));
 
-  // 使用navigateTo API
   for (const key in decodeOption) {
     option[key] = decodeOption[key];
   }
-  // 给onLoad劫持函数一个标记,判断传值来自哪个API
+  // 给onLoad劫持函数一个标记,判断在新框架下已经被解析过了
   option[INNERMARKER.url] = INNERMARKER.url;
 }
 /**
@@ -121,8 +124,10 @@ function loadReceivedDataHandle(
  */
 /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
 function hijack(config: object, field: string, before: Func[] = [], after: Func[] = []) {
+  // @ts-ignore 隐式索引
   const originalFunc: Func | undefined = config[field];
 
+  // @ts-ignore 隐式索引
   config[field] = function(...args: any[]) {
     before.forEach(func => func.call(this, ...args));
 
@@ -150,9 +155,10 @@ function InternalFieldProtection(config: object | undefined, keys: string[]) {
 /**
  * 把函数配置放入一个配置中依次运行
  */
-function _funcConfigHandle(methodsConfig: object, configList: Record<string, Func[]>) {
+function _funcOptionsHandle(config: object, configList: Record<string, Func[]>) {
   for (const key in configList) {
-    methodsConfig[key] = function(...args: unknown[]) {
+    // @ts-ignore 隐式索引
+    config[key] = function(...args: unknown[]) {
       configList[key].forEach(ele => ele.call(this, ...args));
     };
   }
@@ -160,27 +166,27 @@ function _funcConfigHandle(methodsConfig: object, configList: Record<string, Fun
 /**
  * 把函数列表配置放入一个配置中循环一次运行
  */
-function funcConfigHandle(
+function funcOptionsHandle(
   finalOptionsForComponent: FinalOptionsOfComponent,
   isPage: boolean | undefined,
   funcOptions: FuncOptions,
 ) {
-  // 测试框架无法测试page情形
   /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
   if (isPage) {
     // 页面时 生命周期方法(即 on 开头的方法),(https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html)
-    funcOptions.pageLifetimes && _funcConfigHandle(finalOptionsForComponent.methods ||= {}, funcOptions.pageLifetimes);
+    !(isEmptyObject(funcOptions.pageLifetimes))
+      && _funcOptionsHandle(finalOptionsForComponent.methods, funcOptions.pageLifetimes);
   } else {
     // 组件时
-    funcOptions.pageLifetimes
-      && _funcConfigHandle(finalOptionsForComponent.pageLifetimes ||= {}, funcOptions.pageLifetimes);
+    !(isEmptyObject(funcOptions.pageLifetimes))
+      && _funcOptionsHandle(finalOptionsForComponent.pageLifetimes ||= {}, funcOptions.pageLifetimes);
   }
-  funcOptions.lifetimes && _funcConfigHandle(finalOptionsForComponent.lifetimes ||= {}, funcOptions.lifetimes);
+  funcOptions.lifetimes && _funcOptionsHandle(finalOptionsForComponent.lifetimes ||= {}, funcOptions.lifetimes);
 
-  funcOptions.watch && _funcConfigHandle(finalOptionsForComponent.watch ||= {}, funcOptions.watch);
+  funcOptions.watch && _funcOptionsHandle(finalOptionsForComponent.watch ||= {}, funcOptions.watch);
 }
 /**
- * 把配置为函数的字段方法收集到funcConfig中
+ * 把配置为函数的字段方法收集到funcOptions中
  */
 function funcFieldsCollect(
   options: SubComponentTrueOptions | RootComponentTrueOptions,
@@ -188,13 +194,14 @@ function funcFieldsCollect(
 ) {
   for (const key in funcOptions) {
     // key = "pageLifetimes" | "lifetimes" | "watch"
+    // @ts-ignore 隐式索引
     if (options[key]) {
+      // @ts-ignore 隐式索引
       for (const _key in options[key]) {
+        // @ts-ignore 隐式索引
         (funcOptions[key][_key] ||= []).push(options[key][_key]);
       }
     }
-
-    Reflect.deleteProperty(options, key);
   }
 }
 
@@ -206,12 +213,13 @@ function otherFieldsHandle(
   rootComponentOptions: RootComponentTrueOptions,
 ) {
   for (const key in rootComponentOptions) {
+    // @ts-ignore 隐式索引
     const config = rootComponentOptions[key];
-    if (Array.isArray(config)) {
-      // 好像只有behaviors是数组吧.
-      /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-      (finalOptions[key] ||= []).push(...config);
+    if (key === "behaviors") {
+      // 是不是只有behaviors是数组
+      finalOptions[key].push(...config);
     } else {
+      // @ts-ignore 隐式索引
       Object.assign(finalOptions[key] ||= {}, config);
     }
   }
@@ -219,11 +227,8 @@ function otherFieldsHandle(
 /**
  * 把events字段放入到componentOptions.methods中
  */
-function eventsHandle(componentOptions: FinalOptionsOfComponent, eventsConfig: EventsConstraint) {
-  /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  componentOptions.methods ||= {};
-
-  Object.assign(componentOptions.methods, eventsConfig);
+function eventsHandle(methods: FinalOptionsOfComponent["methods"], eventsConfig: EventsConstraint) {
+  Object.assign(methods, eventsConfig);
 }
 function subComponentsHandle(
   componentOptions: FinalOptionsOfComponent,
@@ -231,7 +236,7 @@ function subComponentsHandle(
   funcOptions: FuncOptions,
 ) {
   subComponents.forEach((subOption) => {
-    subOption.events && eventsHandle(componentOptions, subOption.events);
+    subOption.events && eventsHandle(componentOptions.methods, subOption.events);
 
     funcFieldsCollect(subOption, funcOptions);
 
@@ -250,21 +255,18 @@ function IsFullCustomEvents(
  * 把customEvents字段配置变成函数放入到componentOptions.methods中
  */
 function customEventsHandle(
-  componentOptions: FinalOptionsOfComponent,
+  methods: FinalOptionsOfComponent["methods"],
   customEventsConfig: CustomEventConstraint,
 ) {
-  /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  componentOptions.methods ||= {};
-
   for (const key in customEventsConfig) {
     const customEventOptions = customEventsConfig[key];
 
     if (IsFullCustomEvents(customEventOptions)) {
-      componentOptions.methods[key] = function(this: Instance, detail: unknown) {
+      methods[key] = function(this: Instance, detail: unknown) {
         this.triggerEvent(key, detail, customEventOptions.options);
       };
     } else {
-      componentOptions.methods[key] = function(this: Instance, detail: unknown) {
+      methods[key] = function(this: Instance, detail: unknown) {
         this.triggerEvent(key, detail);
       };
     }
@@ -281,13 +283,9 @@ function collectRootComponentOption(
   funcOptions: FuncOptions,
   rootComponentOptions: RootComponentTrueOptions,
 ) {
-  rootComponentOptions.customEvents && customEventsHandle(finalOptions, rootComponentOptions.customEvents);
-
-  delete rootComponentOptions.customEvents;
+  rootComponentOptions.customEvents && customEventsHandle(finalOptions.methods, rootComponentOptions.customEvents);
 
-  rootComponentOptions.events && eventsHandle(finalOptions, rootComponentOptions.events);
-
-  delete rootComponentOptions.events;
+  rootComponentOptions.events && eventsHandle(finalOptions.methods, rootComponentOptions.events);
 
   funcFieldsCollect(rootComponentOptions, funcOptions);
 
@@ -306,15 +304,16 @@ export function collectOptionsForComponent(
   const rootComponentOption = defineComponentOption.rootComponent;
   const subComponentsList = defineComponentOption.subComponents;
   const finalOptionsForComponent: FinalOptionsOfComponent = {
-    // default options
     options: {
       addGlobalClass: true, // "styleIsolation": "apply-shared"
       multipleSlots: true,
       pureDataPattern: /^_/,
       virtualHost: true,
     },
-    // default behaviors
     behaviors: [BStore, BComputedAndWatch],
+    methods: {},
+    observers: {},
+    data: {},
   };
   /**
    * 有些字段配置同时存在根组件和子组件当中(如pageLifetimes，lifetimes,watch字段), 且key相同值类型为函数。funcConfig对象用于收集这些配置为数组形式,最终再一起整合进finalOptionsForComponent配置中。即funcConfig是一个临时中介对象。
@@ -334,25 +333,25 @@ export function collectOptionsForComponent(
   }
   // miniprogram-simulate(当前版本 1.6.1) 无法测试页面
   /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  funcConfigHandle(finalOptionsForComponent, rootComponentOption?.isPage, funcOptions);
+  funcOptionsHandle(finalOptionsForComponent, rootComponentOption?.isPage, funcOptions);
 
-  finalOptionsForComponent.methods && InternalFieldProtection(finalOptionsForComponent.methods, ["disposer"]);
+  InternalFieldProtection(finalOptionsForComponent.methods, ["disposer"]);
 
+  // 对页面传入参数进行处理 老框架劫持页面methods.onLoad,新框架劫持页面pageLifetimes.load
   /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  finalOptionsForComponent.methods?.onLoad
-    && hijack(finalOptionsForComponent.methods, "onLoad", [onLoadReceivedDataHandle, initComputed], []);
+  finalOptionsForComponent.isPage
+    && hijack(finalOptionsForComponent.pageLifetimes ||= {}, "load", [loadReceivedDataHandle], []);
 
   /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  finalOptionsForComponent.pageLifetimes?.load
-    && hijack(finalOptionsForComponent.pageLifetimes, "load", [loadReceivedDataHandle], []);
+  hijack(finalOptionsForComponent.methods, "onLoad", [onLoadReceivedDataHandle], []);
 
   // hijack(finalOptionsForComponent.lifetimes!, "attached", [pathCheck(defineComponentOption.path)], []);
 
   /* istanbul ignore next: miniprogram-simulate(当前版本 1.6.1) 无法测试页面 */
-  if (finalOptionsForComponent.isPage) {
+  finalOptionsForComponent.isPage
     // 页面时删除预设的虚拟组件字段
-    Reflect.deleteProperty(finalOptionsForComponent.options!, "virtualHost");
-  }
+    && Reflect.deleteProperty(finalOptionsForComponent.options!, "virtualHost");
+
   // BBeforeCreate在最后面,让BeforeCreate生命周期运行在最终建立组件时。
   finalOptionsForComponent.behaviors!.push(BBeforeCreate);
 

package/src/api/DefineComponent/index.ts

@@ -55,6 +55,6 @@ export type DefineComponentOption = {
 export const DefineComponent: DefineComponentConstructor = function(options): any {
   // console.log("---------------------------");
   Component(
-    collectOptionsForComponent(options as DefineComponentOption),
+    collectOptionsForComponent(options as DefineComponentOption) as any,
   );
 };

package/src/api/RootComponent/Lifetimes/test/error.test.ts

@@ -8,7 +8,7 @@ RootComponent()({
     ready() {},
     detached() {},
     error(err) {
-      err.cause;
+      err.message;
     },
     moved() {},
     // @ts-expect-error  1 错误的声明周期字段报错

package/src/api/RootComponent/Lifetimes/test/normal.test.ts

@@ -18,7 +18,7 @@ RootComponent()({
     detached() {
     },
     error(err) {
-      err.cause;
+      err.message;
     },
     moved() {
     },

package/src/api/RootComponent/PageLifetimes/PageLifetimesOption.ts

@@ -17,7 +17,7 @@ export type PageLifetimesOption<TIsPage extends boolean, PropertiesDoc extends o
          * 周期发生在组件attached之后,页面onLoad之前,要求组件为同步组件
          * 最低基础库： `3.0.2`
          */
-        load?: (props: object) => void | Promise<void>;
+        load?: (props: object) => void;
       }
     >;
   },

package/src/api/RootComponent/Watch/test/WatchProperties.test.ts

@@ -134,7 +134,7 @@ RootComponent()({
     optional_obj(newValue, oldValue) {
       Checking<ReadonlyDeep<Mock_User>, typeof newValue, Test.Pass>;
 
-      Checking<ReadonlyDeep<Mock_User> | null, typeof oldValue, Test.Pass>;
+      Checking<ReadonlyDeep<Mock_User | null>, typeof oldValue, Test.Pass>;
     },
     // 对象的二段key
     "optional_obj.age"(newValue, oldValue) {

package/src/api/RootComponent/index.ts

@@ -128,7 +128,7 @@ export function RootComponent<
 >(): RootComponentConstructor<
   TComponentDocList
 > {
-  return ((options: any) => options as RootComponentTrueOptions) as any;
+  return (options: any) => options;
 }
 
 export type RootComponentTrueOptions = {

package/src/api/navigateTo.ts

@@ -56,6 +56,7 @@ function _encodeURIComponent(
 export function navigateTo<TPageDoc extends PageDoc = never>(
   option: NoInfer<NavigateToOption<TPageDoc>>,
 ) {
+  // @ts-ignore 隐式索引
   if (!option["data"]) {
     return wx.navigateTo(option);
   } else {

package/src/behaviors/BComputedAndWatch/computedUpdater.ts

@@ -6,18 +6,12 @@ import { isEqual } from "./isEqual";
 import type { Instance } from "./types";
 
 export function computedUpdater(this: Instance, isUpdated = false): boolean {
-  // console.log("computedUpdater开始");
-
-  // console.log("循环判断缓存中每个计算属性依赖是否有变化");
-
   for (const key in this.__computedCache__) {
-    // console.log("当前计算属性为:", key);
-
     const itemCache = this.__computedCache__[key];
     let changed = false;
     for (const dep of itemCache.dependences) {
       // getPathsValue返回的是数组
-      const curVal = getPathsValue.call(this, dep.paths.join("."))[0];
+      const curVal = getPathsValue(this.data, dep.paths.join("."))[0];
 
       // 检查依赖是否更新
       if (!isEqual(curVal, dep.val)) {
@@ -28,19 +22,7 @@ export function computedUpdater(this: Instance, isUpdated = false): boolean {
     }
     if (changed) {
       const newDependences: ComputedDependence[] = [];
-      // eslint-disable-next-line @typescript-eslint/no-this-alias
-      const _this = this;
-      const computedThis = new Proxy({ data: deepProxy(this.data, newDependences) }, {
-        get(target, key) {
-          if (key === "data") {
-            return Reflect.get(target, key);
-          }
-
-          return Reflect.get(_this, key);
-        },
-      });
-
-      const newValue = itemCache.method.call(computedThis);
+      const newValue = itemCache.method.call({ data: deepProxy(this.data, newDependences) });
 
       // 更新值不会立即再次进入**函数,而是当前**函数运行完毕后触发**函数,
       this.setData({

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

@@ -11,7 +11,7 @@ export function deepProxy(
       // console.log(target, prop);
 
       if (prop === "__rawObject__") return target;
-
+      // @ts-ignore 隐式索引
       const val = target[prop];
 
       // console.log("获取依赖", prop, val);
@@ -28,6 +28,8 @@ export function deepProxy(
       }
       const curPath = basePath.concat(prop);
 
+      // console.log(prop, val,'in');
+
       dependences.push({ paths: curPath, val: unwrap(val) });
 
       // 自身方法或原型属性不代理
@@ -40,6 +42,9 @@ export function deepProxy(
 
       return deepProxy(val, dependences, curPath);
     },
+    set(_target: object, prop: string) {
+      throw Error(`${prop}字段是只读的`);
+    },
   };
 
   return new Proxy(data, handler);

package/src/behaviors/BComputedAndWatch/getPathsValue.ts

@@ -1,12 +1,10 @@
-import type { Instance } from "./types";
-
 /**
  * 获取指定paths的值
  * @param this  - 组件实例 Instance
  * @param paths - 支持多字段(用`,`分开) 例如 'obj.xxx,a,b' 监控了3个字段
  * @returns unknown[] 每项对应paths每项的值
  */
-export function getPathsValue(this: Instance, paths: string) {
+export function getPathsValue(data: object, paths: string) {
   const valueList: unknown[] = [];
 
   // ['obj.xxx','a','b'].forEach
@@ -19,7 +17,7 @@ export function getPathsValue(this: Instance, paths: string) {
       } catch (error) {
         return undefined;
       }
-    }, this.data);
+    }, data);
 
     valueList.push(value);
   });

package/src/behaviors/BComputedAndWatch/getPropertiesValue.ts

@@ -0,0 +1,57 @@
+import type {
+  PropertiesConstraint,
+  PropertiesTypes,
+  RequiredSingle,
+  RequiredUnion,
+} from "../../api/RootComponent/Properties/PropertiesConstraint";
+
+type PropertiesDefaultValue = "" | 0 | [] | null | false;
+
+/* istanbul ignore next */
+function getRequiredSingleValue(
+  PropType: RequiredSingle,
+): PropertiesDefaultValue {
+  switch (PropType) {
+    case String:
+      return "";
+    case Number:
+      return 0;
+    case Array:
+      return [];
+    case Object:
+      return null;
+    case Boolean:
+      return false;
+    default:
+      /* istanbul ignore next */
+      throw Error(
+        "properties字段类型只能为 String | Number | Array | Object | Boolean",
+      );
+  }
+}
+function IsRequiredSingle(config: PropertiesTypes): config is RequiredSingle {
+  return config instanceof Function;
+}
+function IsRequiredUnion(config: PropertiesTypes): config is RequiredUnion {
+  return !Reflect.has(config, "value");
+}
+export function getPropertiesValue(propertiesOpt: PropertiesConstraint | undefined): object | undefined {
+  if (propertiesOpt === undefined) return;
+  const result = {};
+  for (const key in propertiesOpt) {
+    const config = propertiesOpt[key];
+    /* istanbul ignore next */
+    if (IsRequiredSingle(config)) {
+      // @ts-ignore 隐式索引
+      result[key] = getRequiredSingleValue(config);
+    } else if (IsRequiredUnion(config)) {
+      // @ts-ignore 隐式索引
+      result[key] = getRequiredSingleValue(config.type);
+    } else {
+      // @ts-ignore 隐式索引
+      result[key] = config.value;
+    }
+  }
+
+  return result;
+}

package/src/behaviors/BComputedAndWatch/index.ts

@@ -1,22 +1,24 @@
-import type { Func } from "hry-types/src/Misc/Func";
-
+import type { Func } from "hry-types/src/Misc/_api";
 import type { FinalOptionsOfComponent } from "../../api/DefineComponent/collectOptionsForComponent";
 import { deepClone } from "../../utils/deepClone";
 import { deleteProtoField } from "../../utils/deleteProtoField";
 import { isEmptyObject } from "../../utils/isEmptyObject";
+import { computedUpdater } from "./computedUpdater";
 import { getPathsValue } from "./getPathsValue";
+import { getPropertiesValue } from "./getPropertiesValue";
 import { initComputed } from "./initComputed";
 import { isEqual } from "./isEqual";
-import { isPage } from "./IsPage";
 import type { Instance, WatchOldValue } from "./types";
 function initWatchOldValue(this: Instance, watchConfig: object): WatchOldValue {
   const watchOldValue = {};
   for (const key in watchConfig) {
-    watchOldValue[key] = deepClone(getPathsValue.call(this, key));
+    // @ts-ignore 隐式索引
+    watchOldValue[key] = deepClone(getPathsValue(this.data, key));
   }
 
   return watchOldValue;
 }
+
 /**
  * 实现
  * 1. 计算属性初始化在attached之后(前版本在beforeCreate)
@@ -32,60 +34,50 @@ function initWatchOldValue(this: Instance, watchConfig: object): WatchOldValue {
  */
 
 export const BComputedAndWatch = Behavior({
+  // @ts-ignore
   definitionFilter(options: FinalOptionsOfComponent) {
+    // 计算属性初始化
+    const rawPropertiesValue = getPropertiesValue(options.properties);
+    const methodOpt = options.methods;
     const computedConfig = options.computed;
 
-    // computed handle
     if (computedConfig && !isEmptyObject(computedConfig)) {
-      /* istanbul ignore next */
-      options.methods ||= {};
-
-      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 && /* istanbul ignore next */ 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 && /* istanbul ignore next */ originalFunc.call(this);
-              }
-            }
-            break;
-          case "更新完毕":
-            {
-              // 4 来自计算属性更新后的自身回调
-              // console.log("来自计算属性更新后的自身回调");
-              this.__computedStatus__ = "待更新";
+      const computedCache = initComputed(options, computedConfig, { ...options.data, ...rawPropertiesValue });
 
+      // 把计算属性缓存从方法中带入到实例中,在created周期加入实例后删除
+      methodOpt.__computedInitCache__ = () => computedCache;
+    }
+    const observersConfig = options.observers;
+    // 通过observers加入`**`字段来触发计算属性更新
+    const originalFunc = observersConfig["**"] as Func | undefined;
+
+    observersConfig["**"] = function(this: Instance): undefined {
+      const computedStatus = this.__computedStatus__;
+      switch (computedStatus) {
+        case "待更新":
+          // 3. 触发来自attached后的setData或properties更新
+          {
+            const isUpdated = this.__computedUpdater__();
+            if (isUpdated) {
+              // 更新了会再次触发自身转到 4
+              this.__computedStatus__ = "更新完毕";
+            } else {
+              // 无需更新计算属性
               originalFunc && /* istanbul ignore next */ originalFunc.call(this);
             }
-            break;
-        }
-      };
-    }
+          }
+          break;
+        case "更新完毕":
+          {
+            // 4 来自计算属性更新后的自身回调
+            // console.log("来自计算属性更新后的自身回调");
+            this.__computedStatus__ = "待更新";
+
+            originalFunc && /* istanbul ignore next */ originalFunc.call(this);
+          }
+          break;
+      }
+    };
 
     // watch handle
     const watchConfig = options.watch;
@@ -96,6 +88,7 @@ export const BComputedAndWatch = Behavior({
       // 把watch配置保留在methods的__watchConfig__字段下带入到组件实例中。
       methodsConfig.__watchConfig__ = () => watchConfig;
 
+      /* istanbul ignore next */
       const observersConfig = options.observers ||= {};
       for (const key in watchConfig) {
         const watchHadle = watchConfig[key];
@@ -114,22 +107,25 @@ export const BComputedAndWatch = Behavior({
   },
   lifetimes: {
     created(this: Instance) {
+      // 把计算属性的初始缓存放入实例
+      const __computedInitCache__ = this.__computedInitCache__?.();
+
+      this.__computedCache__ = __computedInitCache__;
+
+      deleteProtoField(this, "__computedInitCache__");
+
+      this.__computedStatus__ = "待更新";
+
+      this.__computedUpdater__ = computedUpdater.bind(this);
+
       // 初始化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函数完成
-    },
   },
 });