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

pages/SyntaxCase/index.vue

 <template>
+  <view>
     <button @click="testUtsSync">点击测试uts同步方法</button>
     <view>测试return：
       {{ format(testUtsSyncResult) }}
@@ -40,280 +41,282 @@
     <view>测试success：{{ format(testUtsClassAsyncResult.success) }}</view>
     <view>测试complete：{{ format(testUtsClassAsyncResult.complete) }}</view>
     <button @click="testAll">点击测试所有</button>
+  </view>
 </template>
-<script lang="ts" setup>
-import { ref, reactive } from "vue";
-import {
+<script>
+  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>({
+  } 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,
-});
-const testUtsAsyncResult = reactive<Result>({
+        },
+        testUtsClassAsyncResult: {
           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;
+        }
+      }
+    },
+    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") {
-      testUtsSyncResult.value = true;
+            this.testUtsSyncResult = true;
           }
         } catch (e) {
           console.error("testUtsSync", e);
         }
-}
-function testUtsSyncWithCallback() {
+      },
+      testUtsSyncWithCallback() {
         try {
-    testUtsSyncWithCallbackResult.return = false;
-    testUtsSyncWithCallbackResult.success = false;
+          this.testUtsSyncWithCallbackResult.return = false;
+          this.testUtsSyncWithCallbackResult.success = false;
           // testUtsSyncWithCallbackResult.fail = false;
-    testUtsSyncWithCallbackResult.complete = false;
+          this.testUtsSyncWithCallbackResult.complete = false;
           if (
             testSyncWithCallback({
               type: "success",
-        success(res) {
+              success: (res) => {
                 console.log("testSyncWithCallback.success.callback", res);
-          testUtsSyncWithCallbackResult.success = true;
+                this.testUtsSyncWithCallbackResult.success = true;
               },
-        fail(res) {
+              fail: (res) => {
                 console.log("testSyncWithCallback.fail.callback", res);
                 // testUtsSyncWithCallbackResult.fail = true;
               },
-        complete(res) {
+              complete: (res) => {
                 console.log("testSyncWithCallback.complete.callback", res);
-          testUtsSyncWithCallbackResult.complete = true;
+                this.testUtsSyncWithCallbackResult.complete = true;
               },
             }).name === "testSyncWithCallback"
           ) {
-      testUtsSyncWithCallbackResult.return = true;
+            this.testUtsSyncWithCallbackResult.return = true;
           }
-  } catch (e) { }
-}
-async function testUtsAsync() {
-  testUtsAsyncResult.return = false;
-  testUtsAsyncResult.success = false;
+        } catch (e) {}
+      },
+      async testUtsAsync() {
+        this.testUtsAsyncResult.return = false;
+        this.testUtsAsyncResult.success = false;
         // testUtsAsyncResult.fail = false;
-  testUtsAsyncResult.complete = false;
+        this.testUtsAsyncResult.complete = false;
         try {
           const res = await testAsync({
             type: "success",
-      success(res) {
+            success: (res) => {
               console.log("testAsync.success.callback", res);
-        testUtsAsyncResult.success = true;
+              this.testUtsAsyncResult.success = true;
             },
-      fail(res) {
+            fail: (res) => {
               console.log("testAsync.fail.callback", res);
             },
-      complete(res) {
+            complete: (res) => {
               console.log("testAsync.complete.callback", res);
-        testUtsAsyncResult.complete = true;
+              this.testUtsAsyncResult.complete = true;
             },
           });
           if (res.name === "testAsync") {
-      testUtsAsyncResult.return = true;
+            this.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
+        } catch (e) {}
+      },
+      testUtsClassConstructor() {
+        this.testUtsClassConstructorResult.callback = false
         id++
         test = new Test(id, {
-    name: 'name' + id, callback: (res) => {
+          name: 'name' + id,
+          callback: (res) => {
             console.log(res)
-      testUtsClassConstructorResult.callback = true
+            this.testUtsClassConstructorResult.callback = true
           }
         })
-}
-const testUtsClassStaticPropResult = ref<boolean | null>(null);
-function testUtsClassStaticProp() {
-  testUtsClassStaticPropResult.value = false
+      },
+      testUtsClassStaticProp() {
+        this.testUtsClassStaticPropResult = false
         if (Test.type === 'Test') {
-    testUtsClassStaticPropResult.value = true
+          this.testUtsClassStaticPropResult = true
         }
-}
-const testUtsClassStaticSyncWithCallbackResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-function testUtsClassStaticSyncWithCallback() {
+      },
+      testUtsClassStaticSyncWithCallback() {
         try {
-    testUtsClassStaticSyncWithCallbackResult.return = false;
-    testUtsClassStaticSyncWithCallbackResult.success = false;
+          this.testUtsClassStaticSyncWithCallbackResult.return = false;
+          this.testUtsClassStaticSyncWithCallbackResult.success = false;
           // testUtsClassStaticSyncWithCallbackResult.fail = false;
-    testUtsClassStaticSyncWithCallbackResult.complete = false;
+          this.testUtsClassStaticSyncWithCallbackResult.complete = false;
           if (
             Test.testClassStaticSyncWithCallback({
               type: "success",
-        success(res) {
+              success: (res) => {
                 console.log("testStaticSyncWithCallback.success.callback", res);
-          testUtsClassStaticSyncWithCallbackResult.success = true;
+                this.testUtsClassStaticSyncWithCallbackResult.success = true;
               },
-        fail(res) {
+              fail: (res) => {
                 console.log("testStaticSyncWithCallback.fail.callback", res);
                 // testUtsClassStaticSyncWithCallbackResult.fail = true;
               },
-        complete(res) {
+              complete: (res) => {
                 console.log("testStaticSyncWithCallback.complete.callback", res);
-          testUtsClassStaticSyncWithCallbackResult.complete = true;
+                this.testUtsClassStaticSyncWithCallbackResult.complete = true;
               },
             }).name === "testSyncWithCallback"
           ) {
-      testUtsClassStaticSyncWithCallbackResult.return = true;
+            this.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;
+        } catch (e) {}
+      },
+      async testUtsClassStaticAsync() {
+        this.testUtsClassStaticAsyncResult.return = false;
+        this.testUtsClassStaticAsyncResult.success = false;
         // testUtsClassStaticAsyncResult.fail = false;
-  testUtsClassStaticAsyncResult.complete = false;
+        this.testUtsClassStaticAsyncResult.complete = false;
         try {
           const res = await Test.testClassStaticAsync({
             type: "success",
-      success(res) {
+            success: (res) => {
               console.log("testAsync.success.callback", res);
-        testUtsClassStaticAsyncResult.success = true;
+              this.testUtsClassStaticAsyncResult.success = true;
             },
-      fail(res) {
+            fail: (res) => {
               console.log("testAsync.fail.callback", res);
             },
-      complete(res) {
+            complete: (res) => {
               console.log("testAsync.complete.callback", res);
-        testUtsClassStaticAsyncResult.complete = true;
+              this.testUtsClassStaticAsyncResult.complete = true;
             },
           });
           if (res.name === "testAsync") {
-      testUtsClassStaticAsyncResult.return = true;
+            this.testUtsClassStaticAsyncResult.return = true;
           }
-  } catch (e) { }
-}
-
-const testUtsClassPropResult = ref<boolean | null>(null);
-function testUtsClassProp() {
+        } catch (e) {}
+      },
+      testUtsClassProp() {
         if (!test) {
-    testUtsClassConstructor()
+          this.testUtsClassConstructor()
         }
-  testUtsClassPropResult.value = false
+        this.testUtsClassPropResult = false
         if (test.id > 0) {
-    testUtsClassPropResult.value = true
+          this.testUtsClassPropResult = true
         }
-}
+      },
 
-const testUtsClassSyncWithCallbackResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-function testUtsClassSyncWithCallback() {
+      testUtsClassSyncWithCallback() {
         if (!test) {
-    testUtsClassConstructor()
+          this.testUtsClassConstructor()
         }
         try {
-    testUtsClassSyncWithCallbackResult.return = false;
-    testUtsClassSyncWithCallbackResult.success = false;
+          this.testUtsClassSyncWithCallbackResult.return = false;
+          this.testUtsClassSyncWithCallbackResult.success = false;
           // testUtsClassSyncWithCallbackResult.fail = false;
-    testUtsClassSyncWithCallbackResult.complete = false;
+          this.testUtsClassSyncWithCallbackResult.complete = false;
           if (
             test.testClassSyncWithCallback({
               type: "success",
-        success(res) {
+              success: (res) => {
                 console.log("testSyncWithCallback.success.callback", res);
-          testUtsClassSyncWithCallbackResult.success = true;
+                this.testUtsClassSyncWithCallbackResult.success = true;
               },
-        fail(res) {
+              fail: (res) => {
                 console.log("testSyncWithCallback.fail.callback", res);
                 // testUtsClassSyncWithCallbackResult.fail = true;
               },
-        complete(res) {
+              complete: (res) => {
                 console.log("testSyncWithCallback.complete.callback", res);
-          testUtsClassSyncWithCallbackResult.complete = true;
+                this.testUtsClassSyncWithCallbackResult.complete = true;
               },
             }).name === "testSyncWithCallback"
           ) {
-      testUtsClassSyncWithCallbackResult.return = true;
+            this.testUtsClassSyncWithCallbackResult.return = true;
           }
-  } catch (e) { }
-}
-const testUtsClassAsyncResult = reactive<Result>({
-  return: null,
-  success: null,
-  fail: null,
-  complete: null,
-});
-async function testUtsClassAsync() {
+        } catch (e) {}
+      },
+
+      async testUtsClassAsync() {
         if (!test) {
-    testUtsClassConstructor()
+          this.testUtsClassConstructor()
         }
-  testUtsClassAsyncResult.return = false;
-  testUtsClassAsyncResult.success = false;
+        this.testUtsClassAsyncResult.return = false;
+        this.testUtsClassAsyncResult.success = false;
         // testUtsClassAsyncResult.fail = false;
-  testUtsClassAsyncResult.complete = false;
+        this.testUtsClassAsyncResult.complete = false;
         try {
           const res = await test.testClassAsync({
             type: "success",
-      success(res) {
+            success: (res) => {
               console.log("testAsync.success.callback", res);
-        testUtsClassAsyncResult.success = true;
+              this.testUtsClassAsyncResult.success = true;
             },
-      fail(res) {
+            fail: (res) => {
               console.log("testAsync.fail.callback", res);
             },
-      complete(res) {
+            complete: (res) => {
               console.log("testAsync.complete.callback", res);
-        testUtsClassAsyncResult.complete = true;
+              this.testUtsClassAsyncResult.complete = true;
             },
           });
           if (res.name === "testAsync") {
-      testUtsClassAsyncResult.return = true;
+            this.testUtsClassAsyncResult.return = true;
+          }
+        } catch (e) {}
+      }
+    }
   }
-  } catch (e) { }
-}
 </script>