wip: 测试 uts 传递 prop 和 emit 时候的数据类型

pages/component-instance/methods/call-method-easycom-uni-modules-composition.uvue

 <template>
   <view>
-    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
+    <call-easy-method-uni-modules ref="callEasyMethod1" :list="propsList"
+      @propsChanged="onPropsChanged"></call-easy-method-uni-modules>
   </view>
 </template>
 
 <script setup lang="uts">
-import { testInOtherFile } from './call-method-easycom-uni-modules'
+  import { testInOtherFile } from './call-method-easycom-uni-modules'
+  import { ref, isProxy, isRef } from 'vue'
 
-const delay = (): Promise<string> =>
-  new Promise((resolve, _) => {
-    setTimeout(() => {
-      resolve('')
-    }, 1000)
-  })
+  const delay = () : Promise<string> =>
+    new Promise((resolve, _) => {
+      setTimeout(() => {
+        resolve('')
+      }, 1000)
+    })
 
-const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)
+  const callEasyMethod1 = ref<CallEasyMethodUniModulesComponentPublicInstance | null>(null)
 
-const callMethod1 = () => {
-  // 调用组件的 foo1 方法
-  callEasyMethod1.value?.foo1?.()
-}
-const callMethod2 = () => {
-  // 调用组件的 foo2 方法并传递 1个参数
-  callEasyMethod1.value?.foo2?.(Date.now())
-}
-const callMethod3 = () => {
-  // 调用组件的 foo3 方法并传递 2个参数
-  callEasyMethod1.value?.foo3?.(Date.now(), Date.now())
-}
-const callMethod4 = () => {
-  // 调用组件的 foo4 方法并传递 callback
-  callEasyMethod1.value?.foo4?.(() => {
-    console.log('callback')
-  })
-}
-const callMethod5 = () => {
-  // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
-  const result = callEasyMethod1.value?.foo5?.('string5') as string
-  console.log(result) // string1
-}
-const callMethodTest = (text: string): string | null => {
-  const result = callEasyMethod1.value?.foo5?.(text) as string
-  return result
-}
-const callMethodInOtherFile = (text: string): string => {
-  return testInOtherFile(callEasyMethod1.value!, text)
-}
+  const isWatched = ref(false)
+  const changeTimes = ref(0)
+  const propsList = ref<number[]>([])
+
+  const callMethod1 = () => {
+    // 调用组件的 foo1 方法
+    callEasyMethod1.value?.foo1?.()
+  }
+  const callMethod2 = () => {
+    // 调用组件的 foo2 方法并传递 1个参数
+    callEasyMethod1.value?.foo2?.(Date.now())
+  }
+  const callMethod3 = () => {
+    // 调用组件的 foo3 方法并传递 2个参数
+    callEasyMethod1.value?.foo3?.(Date.now(), Date.now())
+  }
+  const callMethod4 = () => {
+    // 调用组件的 foo4 方法并传递 callback
+    callEasyMethod1.value?.foo4?.(() => {
+      console.log('callback')
+    })
+  }
+  const callMethod5 = () => {
+    // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
+    const result = callEasyMethod1.value?.foo5?.('string5') as string
+    console.log(result) // string1
+  }
+  const callMethodTest = (text : string) : string | null => {
+    const result = callEasyMethod1.value?.foo5?.(text) as string
+    return result
+  }
+  const callMethodInOtherFile = (text : string) : string => {
+    return testInOtherFile(callEasyMethod1.value!, text)
+  }
 
-const call = async (): Promise<void> => {
-  callMethod1()
-  await delay()
-  callMethod2()
-  await delay()
-  callMethod3()
-  await delay()
-  callMethod4()
-  await delay()
-  callMethod5()
-}
+  const onPropsChanged = (val : number[]) => {
+    changeTimes.value = changeTimes.value + 1
+    isWatched.value = isReactive(val) || isProxy(val) || isRef(val)
+    console.log(55, isReactive(val), isProxy(val), isRef(val))
+  }
 
-onReady(() => {
-  call()
-})
+  const call = async () : Promise<void> => {
+    callMethod1()
+    await delay()
+    callMethod2()
+    await delay()
+    callMethod3()
+    await delay()
+    callMethod4()
+    await delay()
+    callMethod5()
+    await delay()
+    // 改变  props 观察 props 返回值为非响应式值
+    propsList.value = [3, 2, 1]
+  }
 
-defineExpose({
-  callMethodTest,
-  callMethodInOtherFile
-})
-</script>
\ No newline at end of file
+  onReady(() => {
+    call()
+  })
+
+  defineExpose({
+    callMethodTest,
+    callMethodInOtherFile
+  })
+</script>

pages/component-instance/methods/call-method-easycom-uni-modules-options.uvue

 <template>
   <view>
-    <call-easy-method-uni-modules ref="callEasyMethod1"></call-easy-method-uni-modules>
+    <call-easy-method-uni-modules ref="callEasyMethod1" :list="propsList"
+      @propsChanged="onPropsChanged"></call-easy-method-uni-modules>
   </view>
 </template>
 
 <script lang="uts">
-import { testInOtherFile } from './call-method-easycom-uni-modules'
+  import { testInOtherFile } from './call-method-easycom-uni-modules'
+  import { isProxy, isRef, isReactive } from 'vue'
 
-const delay = (): Promise<string> =>
-  new Promise((resolve, _) => {
-    setTimeout(() => {
-      resolve('')
-    }, 1000)
-  })
+  const delay = () : Promise<string> =>
+    new Promise((resolve, _) => {
+      setTimeout(() => {
+        resolve('')
+      }, 1000)
+    })
 
-export default {
-  data() {
-    return {
-      callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null
-    }
-  },
-  onReady() {
-    // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
-    this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance
-
-    this.call()
-  },
-  methods: {
-    async call(): Promise<void> {
-      this.callMethod1()
-      await delay()
-      this.callMethod2()
-      await delay()
-      this.callMethod3()
-      await delay()
-      this.callMethod4()
-      await delay()
-      this.callMethod5()
-    },
-    callMethod1() {
-      // 调用组件的 foo1 方法
-      this.callEasyMethod1?.foo1?.()
-    },
-    callMethod2() {
-      // 调用组件的 foo2 方法并传递 1个参数
-      this.callEasyMethod1?.foo2?.(Date.now())
-    },
-    callMethod3() {
-      // 调用组件的 foo3 方法并传递 2个参数
-      this.callEasyMethod1?.foo3?.(Date.now(), Date.now())
+  export default {
+    data() {
+      return {
+        callEasyMethod1: null as CallEasyMethodUniModulesComponentPublicInstance | null,
+        isWatched: false,
+        changeTimes: 0,
+        propsList: [] as number[]
+      }
     },
-    callMethod4() {
-      // 调用组件的 foo4 方法并传递 callback
-      this.callEasyMethod1?.foo4?.(() => {
-        console.log('callback')
-      })
-    },
-    callMethod5() {
-      // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
-      const result = this.callEasyMethod1?.foo5?.('string5') as string
-      console.log(result) // string1
-    },
-    callMethodTest(text: string): string | null {
-      const result = this.callEasyMethod1?.foo5?.(text) as string
-      return result
+    onReady() {
+      // 通过组件 ref 属性获取组件实例, 组件标签名首字母大写，驼峰+ComponentPublicInstance
+      this.callEasyMethod1 = this.$refs['callEasyMethod1'] as CallEasyMethodUniModulesComponentPublicInstance
+
+      this.call()
     },
-    callMethodInOtherFile(text: string): string {
-      return testInOtherFile(this.callEasyMethod1!, text)
+    methods: {
+      async call() : Promise<void> {
+        this.callMethod1()
+        await delay()
+        this.callMethod2()
+        await delay()
+        this.callMethod3()
+        await delay()
+        this.callMethod4()
+        await delay()
+        this.callMethod5()
+        await delay()
+        // 改变  props 观察 props 返回值为非响应式值
+        this.propsList = [3, 2, 1]
+      },
+      callMethod1() {
+        // 调用组件的 foo1 方法
+        this.callEasyMethod1?.foo1?.()
+      },
+      callMethod2() {
+        // 调用组件的 foo2 方法并传递 1个参数
+        this.callEasyMethod1?.foo2?.(Date.now())
+      },
+      callMethod3() {
+        // 调用组件的 foo3 方法并传递 2个参数
+        this.callEasyMethod1?.foo3?.(Date.now(), Date.now())
+      },
+      callMethod4() {
+        // 调用组件的 foo4 方法并传递 callback
+        this.callEasyMethod1?.foo4?.(() => {
+          console.log('callback')
+        })
+      },
+      callMethod5() {
+        // 注意： 返回值可能为 null，当前例子一定不为空，所以加了 !
+        const result = this.callEasyMethod1?.foo5?.('string5') as string
+        console.log(result) // string1
+      },
+      callMethodTest(text : string) : string | null {
+        const result = this.callEasyMethod1?.foo5?.(text) as string
+        return result
+      },
+      callMethodInOtherFile(text : string) : string {
+        return testInOtherFile(this.callEasyMethod1!, text)
+      },
+      onPropsChanged(val : number[]) {
+
+        this.changeTimes = this.changeTimes + 1
+
+        this.isWatched = isReactive(val) || isProxy(val) || isRef(val)
+        console.log(55, isReactive(val), isProxy(val), isRef(val))
+      }
     }
   }
-}
-</script>
\ No newline at end of file
+</script>

uni_modules/call-easy-method/components/call-easy-method-uni-modules/call-easy-method-uni-modules.vue

@@ -4,11 +4,27 @@
 
 <script>
   export default {
+    props: {
+      list: {
+        type: Array as PropType < number[] > ,
+        default: () => [] as number[]
+      }
+    },
     data() {
       return {
         result: ''
       }
     },
+    emits:['propsChanged'],
+    watch: {
+      list: {
+        handler(newVal, oldVal) {
+          console.log('isProxy',isProxy(newVal),'isReactive',isReactive(newVal),'isRef',isRef(newVal))
+          this.$emit('propsChanged', newVal)
+        },
+        immediate: true
+      }
+    },
     methods: {
       foo1() {
         this.result = "foo1"
@@ -28,4 +44,4 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>