feat: watch支持配置单个字段监控多个数据,但没有类型提示 计算属性初始化改为beforeCreated

Release-As: 1.3.0

jest/beforeCreate/beforeCreate.ts

@@ -8,7 +8,6 @@ const sub = SubComponent<Root, { properties: { aaa_num: number; aaa_user: User |
     aaa_num: 456,
     aaa_user: null,
   },
-  lifetimes: {},
 });
 
 type Root = typeof rootComponent;

jest/computed/normal/normal.test.ts

@@ -0,0 +1,72 @@
+import { load, render, sleep } from "miniprogram-simulate";
+import path from "path";
+import { user } from "../../common";
+
+describe("计算属性 --> 一般测试", () => {
+  const id = load(path.resolve(__dirname, "normal")); // 此处必须传入绝对路径
+  const comp = render(id, { requiredUser: user }); // 渲染成自定义组件树实例
+
+  const parent = document.createElement("parent-wrapper"); // 创建挂载(父)节点
+
+  comp.attach(parent); // attach 到父亲节点上，此时会触发自定义组件的 attached 钩子
+
+  test("根组件计算属性初始化值(attached) ", () => {
+    expect(comp.data.CoptionalUser).toStrictEqual(user);
+
+    expect(comp.data.CoptionalUser).toStrictEqual(user);
+
+    expect(comp.data.copyPropUser).toStrictEqual(user);
+
+    expect(comp.data.age).toBe(30 + 1);
+
+    expect(comp.data.CStoreAge).toBe(20);
+  });
+
+  test("子组件计算属性初始化值(attached)", () => {
+    expect(comp.data.compA_user).toStrictEqual(user);
+
+    expect(comp.data.compA_num).toBe(30 + 1 + 30);
+  });
+
+  test("data字段变化时", async () => {
+    await sleep(100);
+
+    expect(comp.data.age).toStrictEqual(30 + 2);
+
+    expect(comp.data.compA_num).toBe(30 + 2 + 30);
+  });
+
+  test("properties字段变化时", async () => {
+    await sleep(200);
+
+    expect(comp.data.CrequiredUser).toStrictEqual({ name: "zhao", age: 20 });
+
+    expect(comp.data.copyPropUser).toStrictEqual({ name: "zhao", age: 20 });
+
+    expect(comp.data.compA_user).toStrictEqual({ name: "zhao", age: 20 });
+
+    expect(comp.data.age).toBe(20 + 2);
+  });
+
+  test("setData改变对象子字段时", async () => {
+    await sleep(300);
+
+    expect(comp.data.CoptionalUser).toStrictEqual({ name: "lili", age: 50 });
+
+    expect(comp.data.compA_num).toStrictEqual(50 + 2 + 50);
+  });
+
+  test("store字段变化时", async () => {
+    await sleep(400);
+
+    expect(comp.data.CStoreAge).toBe(30);
+  });
+
+  test("properties对象字段为null时", async () => {
+    await sleep(1000);
+
+    expect(comp.data.CoptionalUser).toBe(null);
+
+    expect(comp.data.compA_num).toStrictEqual(0 + 2 + 0);
+  });
+});

jest/computed/normal/normal.ts

@@ -0,0 +1,124 @@
+import { observable } from "mobx";
+import { DefineComponent, type DetailedType, RootComponent, SubComponent } from "../../../src";
+import { type CompDoc, type User, user } from "../../common";
+
+const store = observable({
+  name: "zhao",
+  age: 20,
+  addAge(num: number) {
+    this.age = this.age + num;
+  },
+});
+
+const subA = SubComponent<Root, CompDoc>()({
+  computed: {
+    // 5 可引用根组件properties、data和计算字段
+    compA_num(): number {
+      return (this.data.optionalUser?.age || 0) + this.data.num + (this.data.CoptionalUser?.age || 0);
+    },
+    // 6 可引用根组件properties、data和计算字段
+    compA_user(): User | null {
+      return this.data.copyPropUser;
+    },
+  },
+});
+
+type Root = typeof rootComponent;
+
+const rootComponent = RootComponent()({
+  properties: {
+    requiredUser: Object as DetailedType<User>,
+    optionalUser: {
+      type: Object as DetailedType<User>,
+      value: user,
+    },
+    forCoverage: {
+      type: Object as DetailedType<{ user: { user: User } }>,
+      value: { user: { user } },
+    },
+  },
+  data: {
+    num: 1,
+  },
+  store: {
+    storeAge: () => store.age,
+  },
+  computed: {
+    CforCoverage() {
+      // 为了营造多个依赖字段去触发依赖去重而写。去重时依赖为 ["forCoverage.user.","forCoverage.user.user.age."]  initComputed.ts的79-81行
+      this.data.forCoverage?.user;
+
+      this.data.forCoverage?.user.user.age;
+
+      return 123;
+    },
+    /**
+     * 7 可引用store中的数据
+     */
+    CStoreAge() {
+      return this.data.storeAge;
+    },
+    /**
+     * 4 可引用下面(后写)的计算属性的子字段,对应[initComputed.ts](../../../src/behaviors/BComputedAndWatch/initComputed.ts)中的 情形2
+     */
+    age() {
+      return (this.data.copyPropUser?.age || 20) + this.data.num;
+    },
+    /**
+     * 3 可引用下面(后写)的计算属性,对应[initComputed.ts](../../../src/behaviors/BComputedAndWatch/initComputed.ts)中的 情形1
+     */
+    copyPropUser() {
+      return this.data.CrequiredUser;
+    },
+    // 2 计算属性可引用properties必传字段 对象类型加入null(异步对象数据默认null)。
+    CrequiredUser() {
+      return this.data.requiredUser;
+    },
+    // 1 计算属性可引用properties选传字段 对象类型加入null(异步对象数据默认null)。
+    CoptionalUser() {
+      this.data.optionalUser?.name;
+
+      this.data.optionalUser;
+
+      return this.data.optionalUser;
+    },
+  },
+  lifetimes: {
+    attached() {
+      setTimeout(() => {
+        this.setData({
+          num: 2,
+        });
+      }, 100);
+
+      setTimeout(() => {
+        this.setData({
+          requiredUser: { name: "zhao", age: 20 },
+        } as any);
+      }, 200);
+
+      // 改变对象子字段
+      setTimeout(() => {
+        this.setData({
+          "optionalUser.age": 50,
+        } as any);
+      }, 300);
+
+      setTimeout(() => {
+        store.addAge(10);
+      }, 400);
+
+      setTimeout(() => {
+        this.setData({
+          optionalUser: null,
+        } as any);
+      }, 1000);
+    },
+  },
+});
+
+DefineComponent({
+  name: "computed",
+  rootComponent,
+  subComponents: [subA],
+});