重构进阶语法示例，同时支持vue2,vue3

pages/SyntaxCase/index.vue

-<template>
-  <button @click="testUtsSync">点击测试uts同步方法</button>
-  <view>测试return：
-    {{ format(testUtsSyncResult) }}
-  </view>
-  <button @click="testUtsSyncWithCallback">
-    点击测试uts带callback的同步方法
-  </button>
-  <view>测试return：{{ format(testUtsSyncWithCallbackResult.return) }}</view>
-  <view>测试success：{{ format(testUtsSyncWithCallbackResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsSyncWithCallbackResult.complete) }}</view>
-  <button @click="testUtsAsync">点击测试uts异步方法</button>
-  <view>测试return：{{ format(testUtsAsyncResult.return) }}</view>
-  <view>测试success：{{ format(testUtsAsyncResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsAsyncResult.complete) }}</view>
-  <button @click="testUtsClassConstructor">点击测试uts class构造函数</button>
-  <view>测试callback：{{ format(testUtsClassConstructorResult.callback) }}</view>
-  <button @click="testUtsClassStaticProp">点击测试uts class静态属性</button>
-  <view>测试value：{{ format(testUtsClassStaticPropResult) }}</view>
-  <button @click="testUtsClassStaticSyncWithCallback">
-    点击测试uts class静态方法
-  </button>
-  <view>测试return：{{ format(testUtsClassStaticSyncWithCallbackResult.return) }}</view>
-  <view>测试success：{{ format(testUtsClassStaticSyncWithCallbackResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsClassStaticSyncWithCallbackResult.complete) }}</view>
-  <button @click="testUtsClassStaticAsync">点击测试uts class静态异步方法</button>
-  <view>测试return：{{ format(testUtsClassStaticAsyncResult.return) }}</view>
-  <view>测试success：{{ format(testUtsClassStaticAsyncResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsClassStaticAsyncResult.complete) }}</view>
-  <button @click="testUtsClassProp">点击测试uts class实例属性</button>
-  <view>测试value：{{ format(testUtsClassPropResult) }}</view>
-  <button @click="testUtsClassSyncWithCallback">
-    点击测试uts class实例方法
-  </button>
-  <view>测试return：{{ format(testUtsClassSyncWithCallbackResult.return) }}</view>
-  <view>测试success：{{ format(testUtsClassSyncWithCallbackResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsClassSyncWithCallbackResult.complete) }}</view>
-  <button @click="testUtsClassAsync">点击测试uts class实例异步方法</button>
-  <view>测试return：{{ format(testUtsClassAsyncResult.return) }}</view>
-  <view>测试success：{{ format(testUtsClassAsyncResult.success) }}</view>
-  <view>测试complete：{{ format(testUtsClassAsyncResult.complete) }}</view>
-  <button @click="testAll">点击测试所有</button>
-</template>
-<script lang="ts" setup>
-import { ref, reactive } from "vue";
-import {
-  MAX,
-  testSync,
-  testSyncWithCallback,
-  testAsync,
-  Test,
-} from "../../uni_modules/uts-syntaxcase";
-
-console.log("MAX", MAX);
-const testUtsSyncResult = ref<boolean | null>(null);
-interface Result {
-  return: boolean | null;
-  success: boolean | null;
-  fail: boolean | null;
-  complete: boolean | null;
-}
-const testUtsSyncWithCallbackResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-const testUtsAsyncResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-function testAll() {
-  testUtsSync();
-  testUtsSyncWithCallback();
-  testUtsAsync();
-  testUtsClassConstructor();
-  testUtsClassStaticProp();
-  testUtsClassStaticSyncWithCallback();
-  testUtsClassStaticAsync();
-  testUtsClassProp();
-  testUtsClassSyncWithCallback();
-  testUtsClassAsync();
-}
-function testUtsSync() {
-  testUtsSyncResult.value = false;
-  try {
-    if (testSync("dcloud").msg === "hello dcloud") {
-      testUtsSyncResult.value = true;
-    }
-  } catch (e) {
-    console.error("testUtsSync", e);
-  }
-}
-function testUtsSyncWithCallback() {
-  try {
-    testUtsSyncWithCallbackResult.return = false;
-    testUtsSyncWithCallbackResult.success = false;
-    // testUtsSyncWithCallbackResult.fail = false;
-    testUtsSyncWithCallbackResult.complete = false;
-    if (
-      testSyncWithCallback({
-        type: "success",
-        success(res) {
-          console.log("testSyncWithCallback.success.callback", res);
-          testUtsSyncWithCallbackResult.success = true;
-        },
-        fail(res) {
-          console.log("testSyncWithCallback.fail.callback", res);
-          // testUtsSyncWithCallbackResult.fail = true;
-        },
-        complete(res) {
-          console.log("testSyncWithCallback.complete.callback", res);
-          testUtsSyncWithCallbackResult.complete = true;
-        },
-      }).name === "testSyncWithCallback"
-    ) {
-      testUtsSyncWithCallbackResult.return = true;
-    }
-  } catch (e) { }
-}
-async function testUtsAsync() {
-  testUtsAsyncResult.return = false;
-  testUtsAsyncResult.success = false;
-  // testUtsAsyncResult.fail = false;
-  testUtsAsyncResult.complete = false;
-  try {
-    const res = await testAsync({
-      type: "success",
-      success(res) {
-        console.log("testAsync.success.callback", res);
-        testUtsAsyncResult.success = true;
-      },
-      fail(res) {
-        console.log("testAsync.fail.callback", res);
-      },
-      complete(res) {
-        console.log("testAsync.complete.callback", res);
-        testUtsAsyncResult.complete = true;
-      },
-    });
-    if (res.name === "testAsync") {
-      testUtsAsyncResult.return = true;
-    }
-  } catch (e) { }
-}
-function format(v: boolean | null) {
-  return v == null ? "--" : v ? "通过" : "未通过";
-}
-let test: Test
-let id = 0
-const testUtsClassConstructorResult = reactive<{ callback: boolean | null }>({
-  callback: null
-});
-function testUtsClassConstructor() {
-  testUtsClassConstructorResult.callback = false
-  id++
-  test = new Test(id, {
-    name: 'name' + id, callback: (res) => {
-      console.log(res)
-      testUtsClassConstructorResult.callback = true
-    }
-  })
-}
-const testUtsClassStaticPropResult = ref<boolean | null>(null);
-function testUtsClassStaticProp() {
-  testUtsClassStaticPropResult.value = false
-  if (Test.type === 'Test') {
-    testUtsClassStaticPropResult.value = true
-  }
-}
-const testUtsClassStaticSyncWithCallbackResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-function testUtsClassStaticSyncWithCallback() {
-  try {
-    testUtsClassStaticSyncWithCallbackResult.return = false;
-    testUtsClassStaticSyncWithCallbackResult.success = false;
-    // testUtsClassStaticSyncWithCallbackResult.fail = false;
-    testUtsClassStaticSyncWithCallbackResult.complete = false;
-    if (
-      Test.testClassStaticSyncWithCallback({
-        type: "success",
-        success(res) {
-          console.log("testStaticSyncWithCallback.success.callback", res);
-          testUtsClassStaticSyncWithCallbackResult.success = true;
-        },
-        fail(res) {
-          console.log("testStaticSyncWithCallback.fail.callback", res);
-          // testUtsClassStaticSyncWithCallbackResult.fail = true;
-        },
-        complete(res) {
-          console.log("testStaticSyncWithCallback.complete.callback", res);
-          testUtsClassStaticSyncWithCallbackResult.complete = true;
-        },
-      }).name === "testSyncWithCallback"
-    ) {
-      testUtsClassStaticSyncWithCallbackResult.return = true;
-    }
-  } catch (e) { }
-}
-const testUtsClassStaticAsyncResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-async function testUtsClassStaticAsync() {
-  testUtsClassStaticAsyncResult.return = false;
-  testUtsClassStaticAsyncResult.success = false;
-  // testUtsClassStaticAsyncResult.fail = false;
-  testUtsClassStaticAsyncResult.complete = false;
-  try {
-    const res = await Test.testClassStaticAsync({
-      type: "success",
-      success(res) {
-        console.log("testAsync.success.callback", res);
-        testUtsClassStaticAsyncResult.success = true;
-      },
-      fail(res) {
-        console.log("testAsync.fail.callback", res);
-      },
-      complete(res) {
-        console.log("testAsync.complete.callback", res);
-        testUtsClassStaticAsyncResult.complete = true;
-      },
-    });
-    if (res.name === "testAsync") {
-      testUtsClassStaticAsyncResult.return = true;
-    }
-  } catch (e) { }
-}
-
-const testUtsClassPropResult = ref<boolean | null>(null);
-function testUtsClassProp() {
-  if (!test) {
-    testUtsClassConstructor()
-  }
-  testUtsClassPropResult.value = false
-  if (test.id > 0) {
-    testUtsClassPropResult.value = true
-  }
-}
-
-const testUtsClassSyncWithCallbackResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-function testUtsClassSyncWithCallback() {
-  if (!test) {
-    testUtsClassConstructor()
-  }
-  try {
-    testUtsClassSyncWithCallbackResult.return = false;
-    testUtsClassSyncWithCallbackResult.success = false;
-    // testUtsClassSyncWithCallbackResult.fail = false;
-    testUtsClassSyncWithCallbackResult.complete = false;
-    if (
-      test.testClassSyncWithCallback({
-        type: "success",
-        success(res) {
-          console.log("testSyncWithCallback.success.callback", res);
-          testUtsClassSyncWithCallbackResult.success = true;
-        },
-        fail(res) {
-          console.log("testSyncWithCallback.fail.callback", res);
-          // testUtsClassSyncWithCallbackResult.fail = true;
-        },
-        complete(res) {
-          console.log("testSyncWithCallback.complete.callback", res);
-          testUtsClassSyncWithCallbackResult.complete = true;
-        },
-      }).name === "testSyncWithCallback"
-    ) {
-      testUtsClassSyncWithCallbackResult.return = true;
-    }
-  } catch (e) { }
-}
-const testUtsClassAsyncResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-async function testUtsClassAsync() {
-  if (!test) {
-    testUtsClassConstructor()
-  }
-  testUtsClassAsyncResult.return = false;
-  testUtsClassAsyncResult.success = false;
-  // testUtsClassAsyncResult.fail = false;
-  testUtsClassAsyncResult.complete = false;
-  try {
-    const res = await test.testClassAsync({
-      type: "success",
-      success(res) {
-        console.log("testAsync.success.callback", res);
-        testUtsClassAsyncResult.success = true;
-      },
-      fail(res) {
-        console.log("testAsync.fail.callback", res);
-      },
-      complete(res) {
-        console.log("testAsync.complete.callback", res);
-        testUtsClassAsyncResult.complete = true;
-      },
-    });
-    if (res.name === "testAsync") {
-      testUtsClassAsyncResult.return = true;
-    }
-  } catch (e) { }
-}
+<template>
+  <view>
+    <button @click="testUtsSync">点击测试uts同步方法</button>
+    <view>测试return：
+      {{ format(testUtsSyncResult) }}
+    </view>
+    <button @click="testUtsSyncWithCallback">
+      点击测试uts带callback的同步方法
+    </button>
+    <view>测试return：{{ format(testUtsSyncWithCallbackResult.return) }}</view>
+    <view>测试success：{{ format(testUtsSyncWithCallbackResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsSyncWithCallbackResult.complete) }}</view>
+    <button @click="testUtsAsync">点击测试uts异步方法</button>
+    <view>测试return：{{ format(testUtsAsyncResult.return) }}</view>
+    <view>测试success：{{ format(testUtsAsyncResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsAsyncResult.complete) }}</view>
+    <button @click="testUtsClassConstructor">点击测试uts class构造函数</button>
+    <view>测试callback：{{ format(testUtsClassConstructorResult.callback) }}</view>
+    <button @click="testUtsClassStaticProp">点击测试uts class静态属性</button>
+    <view>测试value：{{ format(testUtsClassStaticPropResult) }}</view>
+    <button @click="testUtsClassStaticSyncWithCallback">
+      点击测试uts class静态方法
+    </button>
+    <view>测试return：{{ format(testUtsClassStaticSyncWithCallbackResult.return) }}</view>
+    <view>测试success：{{ format(testUtsClassStaticSyncWithCallbackResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsClassStaticSyncWithCallbackResult.complete) }}</view>
+    <button @click="testUtsClassStaticAsync">点击测试uts class静态异步方法</button>
+    <view>测试return：{{ format(testUtsClassStaticAsyncResult.return) }}</view>
+    <view>测试success：{{ format(testUtsClassStaticAsyncResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsClassStaticAsyncResult.complete) }}</view>
+    <button @click="testUtsClassProp">点击测试uts class实例属性</button>
+    <view>测试value：{{ format(testUtsClassPropResult) }}</view>
+    <button @click="testUtsClassSyncWithCallback">
+      点击测试uts class实例方法
+    </button>
+    <view>测试return：{{ format(testUtsClassSyncWithCallbackResult.return) }}</view>
+    <view>测试success：{{ format(testUtsClassSyncWithCallbackResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsClassSyncWithCallbackResult.complete) }}</view>
+    <button @click="testUtsClassAsync">点击测试uts class实例异步方法</button>
+    <view>测试return：{{ format(testUtsClassAsyncResult.return) }}</view>
+    <view>测试success：{{ format(testUtsClassAsyncResult.success) }}</view>
+    <view>测试complete：{{ format(testUtsClassAsyncResult.complete) }}</view>
+    <button @click="testAll">点击测试所有</button>
+  </view>
+</template>
+<script>
+  import {
+    MAX,
+    testSync,
+    testSyncWithCallback,
+    testAsync,
+    Test,
+  } from "../../uni_modules/uts-syntaxcase";
+  console.log("MAX", MAX);
+  let test
+  let id = 0
+  export default {
+    data() {
+      return {
+        testUtsSyncResult: null,
+        testUtsSyncWithCallbackResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        },
+        testUtsAsyncResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        },
+        testUtsClassConstructorResult: {
+          callback: null
+        },
+        testUtsClassStaticPropResult: null,
+        testUtsClassStaticSyncWithCallbackResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        },
+        testUtsClassStaticAsyncResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        },
+        testUtsClassPropResult: null,
+        testUtsClassSyncWithCallbackResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        },
+        testUtsClassAsyncResult: {
+          return: null,
+          success: null,
+          fail: null,
+          complete: null,
+        }
+      }
+    },
+    methods: {
+      format(v) {
+        return v == null ? "--" : v ? "通过" : "未通过";
+      },
+      testAll() {
+        this.testUtsSync();
+        this.testUtsSyncWithCallback();
+        this.testUtsAsync();
+        this.testUtsClassConstructor();
+        this.testUtsClassStaticProp();
+        this.testUtsClassStaticSyncWithCallback();
+        this.testUtsClassStaticAsync();
+        this.testUtsClassProp();
+        this.testUtsClassSyncWithCallback();
+        this.testUtsClassAsync();
+      },
+      testUtsSync() {
+        this.testUtsSyncResult = false;
+        try {
+          if (testSync("dcloud").msg === "hello dcloud") {
+            this.testUtsSyncResult = true;
+          }
+        } catch (e) {
+          console.error("testUtsSync", e);
+        }
+      },
+      testUtsSyncWithCallback() {
+        try {
+          this.testUtsSyncWithCallbackResult.return = false;
+          this.testUtsSyncWithCallbackResult.success = false;
+          // testUtsSyncWithCallbackResult.fail = false;
+          this.testUtsSyncWithCallbackResult.complete = false;
+          if (
+            testSyncWithCallback({
+              type: "success",
+              success: (res) => {
+                console.log("testSyncWithCallback.success.callback", res);
+                this.testUtsSyncWithCallbackResult.success = true;
+              },
+              fail: (res) => {
+                console.log("testSyncWithCallback.fail.callback", res);
+                // testUtsSyncWithCallbackResult.fail = true;
+              },
+              complete: (res) => {
+                console.log("testSyncWithCallback.complete.callback", res);
+                this.testUtsSyncWithCallbackResult.complete = true;
+              },
+            }).name === "testSyncWithCallback"
+          ) {
+            this.testUtsSyncWithCallbackResult.return = true;
+          }
+        } catch (e) {}
+      },
+      async testUtsAsync() {
+        this.testUtsAsyncResult.return = false;
+        this.testUtsAsyncResult.success = false;
+        // testUtsAsyncResult.fail = false;
+        this.testUtsAsyncResult.complete = false;
+        try {
+          const res = await testAsync({
+            type: "success",
+            success: (res) => {
+              console.log("testAsync.success.callback", res);
+              this.testUtsAsyncResult.success = true;
+            },
+            fail: (res) => {
+              console.log("testAsync.fail.callback", res);
+            },
+            complete: (res) => {
+              console.log("testAsync.complete.callback", res);
+              this.testUtsAsyncResult.complete = true;
+            },
+          });
+          if (res.name === "testAsync") {
+            this.testUtsAsyncResult.return = true;
+          }
+        } catch (e) {}
+      },
+      testUtsClassConstructor() {
+        this.testUtsClassConstructorResult.callback = false
+        id++
+        test = new Test(id, {
+          name: 'name' + id,
+          callback: (res) => {
+            console.log(res)
+            this.testUtsClassConstructorResult.callback = true
+          }
+        })
+      },
+      testUtsClassStaticProp() {
+        this.testUtsClassStaticPropResult = false
+        if (Test.type === 'Test') {
+          this.testUtsClassStaticPropResult = true
+        }
+      },
+      testUtsClassStaticSyncWithCallback() {
+        try {
+          this.testUtsClassStaticSyncWithCallbackResult.return = false;
+          this.testUtsClassStaticSyncWithCallbackResult.success = false;
+          // testUtsClassStaticSyncWithCallbackResult.fail = false;
+          this.testUtsClassStaticSyncWithCallbackResult.complete = false;
+          if (
+            Test.testClassStaticSyncWithCallback({
+              type: "success",
+              success: (res) => {
+                console.log("testStaticSyncWithCallback.success.callback", res);
+                this.testUtsClassStaticSyncWithCallbackResult.success = true;
+              },
+              fail: (res) => {
+                console.log("testStaticSyncWithCallback.fail.callback", res);
+                // testUtsClassStaticSyncWithCallbackResult.fail = true;
+              },
+              complete: (res) => {
+                console.log("testStaticSyncWithCallback.complete.callback", res);
+                this.testUtsClassStaticSyncWithCallbackResult.complete = true;
+              },
+            }).name === "testSyncWithCallback"
+          ) {
+            this.testUtsClassStaticSyncWithCallbackResult.return = true;
+          }
+        } catch (e) {}
+      },
+      async testUtsClassStaticAsync() {
+        this.testUtsClassStaticAsyncResult.return = false;
+        this.testUtsClassStaticAsyncResult.success = false;
+        // testUtsClassStaticAsyncResult.fail = false;
+        this.testUtsClassStaticAsyncResult.complete = false;
+        try {
+          const res = await Test.testClassStaticAsync({
+            type: "success",
+            success: (res) => {
+              console.log("testAsync.success.callback", res);
+              this.testUtsClassStaticAsyncResult.success = true;
+            },
+            fail: (res) => {
+              console.log("testAsync.fail.callback", res);
+            },
+            complete: (res) => {
+              console.log("testAsync.complete.callback", res);
+              this.testUtsClassStaticAsyncResult.complete = true;
+            },
+          });
+          if (res.name === "testAsync") {
+            this.testUtsClassStaticAsyncResult.return = true;
+          }
+        } catch (e) {}
+      },
+      testUtsClassProp() {
+        if (!test) {
+          this.testUtsClassConstructor()
+        }
+        this.testUtsClassPropResult = false
+        if (test.id > 0) {
+          this.testUtsClassPropResult = true
+        }
+      },
+
+      testUtsClassSyncWithCallback() {
+        if (!test) {
+          this.testUtsClassConstructor()
+        }
+        try {
+          this.testUtsClassSyncWithCallbackResult.return = false;
+          this.testUtsClassSyncWithCallbackResult.success = false;
+          // testUtsClassSyncWithCallbackResult.fail = false;
+          this.testUtsClassSyncWithCallbackResult.complete = false;
+          if (
+            test.testClassSyncWithCallback({
+              type: "success",
+              success: (res) => {
+                console.log("testSyncWithCallback.success.callback", res);
+                this.testUtsClassSyncWithCallbackResult.success = true;
+              },
+              fail: (res) => {
+                console.log("testSyncWithCallback.fail.callback", res);
+                // testUtsClassSyncWithCallbackResult.fail = true;
+              },
+              complete: (res) => {
+                console.log("testSyncWithCallback.complete.callback", res);
+                this.testUtsClassSyncWithCallbackResult.complete = true;
+              },
+            }).name === "testSyncWithCallback"
+          ) {
+            this.testUtsClassSyncWithCallbackResult.return = true;
+          }
+        } catch (e) {}
+      },
+
+      async testUtsClassAsync() {
+        if (!test) {
+          this.testUtsClassConstructor()
+        }
+        this.testUtsClassAsyncResult.return = false;
+        this.testUtsClassAsyncResult.success = false;
+        // testUtsClassAsyncResult.fail = false;
+        this.testUtsClassAsyncResult.complete = false;
+        try {
+          const res = await test.testClassAsync({
+            type: "success",
+            success: (res) => {
+              console.log("testAsync.success.callback", res);
+              this.testUtsClassAsyncResult.success = true;
+            },
+            fail: (res) => {
+              console.log("testAsync.fail.callback", res);
+            },
+            complete: (res) => {
+              console.log("testAsync.complete.callback", res);
+              this.testUtsClassAsyncResult.complete = true;
+            },
+          });
+          if (res.name === "testAsync") {
+            this.testUtsClassAsyncResult.return = true;
+          }
+        } catch (e) {}
+      }
+    }
+  }
 </script>