uni-app uts watch 监听 props App 端部分未响应 Web端正常

开发环境	版本号	项目创建方式
Windows	win10	HBuilderX

操作步骤：

// 父组件  
<template>  
    <view>  
        <Child :c1="refCount" :c2="reactiveCount"></Child>  
        <button @click="change">change</button>  
    </view>  
</template>  

<script lang="uts" setup>  
import { PData } from "@/typings/index.uts"  
import Child from "../../components/child.uvue"  

const refCount = ref(0)  
const reactiveCount = reactive({  
    count: 0  
} as PData)  

function change() {  
    refCount.value++  
    reactiveCount.count++  
}  
</script>  

// 子组件  
<template>  
    <view>  
        <view>c1：{{ props.c1 }}</view>  
        <view>c1 ref watched：{{ d.watchedRefC1 }}</view>  
        <view>c1 fn watched ：{{ d.watchedFnC1 }}</view>  

        <view>c2：{{ props.c2.count }}</view>  
        <view>c2 ref watched：{{ d.watchedRefC2 }}</view>  
        <view>c2 fn watched：{{ d.watchedFnC2 }}</view>  
        <view>c2 ref deep watched：{{ d.watchedRefDeepC2 }}</view>  
        <view>c2 fn deep watched：{{ d.watchedFnDeepC2 }}</view>  
    </view>  
</template>  

<script lang="uts" setup>  
import {PData, CData} from "@/typings/index.uts"  

const props = defineProps<{  
    c1: Number;  
    c2: PropType<PData>;  
}>();  

const d = reactive({  
    watchedRefC1: false,  
    watchedFnC1: false,  
    watchedRefC2: false,  
    watchedFnC2: false,  
    watchedRefDeepC2: false,  
    watchedFnDeepC2: false,  
} as CData)  

watch(toRef<number>(props, "c1"), () => {  
    d.watchedRefC1 = true  
})  

watch(() : number => props.c1 as number, () => {  
    d.watchedFnC1 = true  
})  

watch(toRef<number>(props.c2, "count"), () => {  
    d.watchedRefC2 = true  
})  

watch(() : number => (props.c2 as PData).count, () => {  
    d.watchedFnC2 = true  
})  

watch(toRef<PData>(props, "c2"), () => {  
    d.watchedRefDeepC2 = true  
}, { deep: true })  

watch(() : PData => props.c2 as PData, () => {  
    d.watchedFnDeepC2 = true  
}, { deep: true })  
</script>

zlyuanteng 1楼•2 天前

在uni-app中，使用watch监听props的变化是一个常见的需求。如果在App端部分未响应而Web端正常，这可能是由于App端和Web端的渲染机制或者某些特定的平台差异导致的。为了解决这个问题，我们需要确保在App端正确地使用了watch监听props，并且考虑可能的平台差异。

以下是一个简单的uni-app示例，展示了如何使用watch监听props的变化，并处理可能的平台差异。

首先，我们创建一个子组件Child.vue，它接收一个prop值，并使用watch来监听这个值的变化：

<template>
  <view>
    <text>Child Component - Prop Value: {{ propValue }}</text>
  </view>
</template>

<script>
export default {
  props: {
    propValue: {
      type: String,
      default: ''
    }
  },
  watch: {
    propValue(newVal, oldVal) {
      console.log('Prop value changed from', oldVal, 'to', newVal);
      // 在这里处理prop值变化后的逻辑
      // 注意：如果是平台差异导致的问题，可以在这里添加平台判断
      if (process.platform === 'app-plus') {
        // App端特有的处理逻辑
        uni.showToast({
          title: `App端Prop值已更新为：${newVal}`,
          icon: 'none'
        });
      } else {
        // Web端或其他平台的处理逻辑
        console.log('Web端或其他平台Prop值已更新为：', newVal);
      }
    }
  }
}
</script>

然后，在父组件Parent.vue中，我们传递一个动态变化的prop值给子组件：

<template>
  <view>
    <button @click="changePropValue">Change Prop Value</button>
    <Child :propValue="propValue" />
  </view>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      propValue: 'Initial Value'
    };
  },
  methods: {
    changePropValue() {
      this.propValue = `Updated Value at ${new Date().toLocaleTimeString()}`;
    }
  }
}
</script>

在这个示例中，我们使用了watch来监听propValue的变化，并根据平台的不同（通过process.platform判断）执行不同的逻辑。如果App端没有响应，可能是因为某些特定的App端限制或者性能问题。在这种情况下，你可以尝试优化监听逻辑，比如减少不必要的计算或DOM操作，或者使用更高效的异步处理方式。

希望这个示例能帮助你解决问题！如果问题仍然存在，可能需要更深入地检查App端的日志和性能数据，以确定问题的具体原因。