uniapp怎么监听prop的对象

在uniapp中监听prop的对象可以通过使用`watch`来实现。在组件中定义一个`watch`对象，然后在该对象中设置要监听的属性，当属性发生变化时，会自动触发相应的回调函数。

例如，如果要监听一个名为`person`的对象，可以在组件中这样定义`watch`对象：

export default {
  props: {
    person: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    person: {
      handler(val) {
        console.log('person对象发生了变化：', val);
      },
      deep: true,
    }
  }
}

在上面的代码中，我们定义了一个`watch`对象，用于监听`person`对象。当`person`对象发生变化时，会触发`handler`回调函数，并且将新的`person`对象作为参数传递给回调函数。我们还设置了`deep`为`true`，表示要对对象进行深度监听，这样当`person`对象中的子属性发生变化时，也会触发回调函数。

需要注意的是，`watch`对象只能监听props中的属性，如果想监听组件内部的数据，需要使用`$watch`方法。

相关问题

uniapp watch监听

### 如何在 UniApp 中使用 `watch` 实现数据监听

#### 使用场景
在开发过程中，有时需要监控某些特定的数据属性，在其发生变化时执行相应的操作。Vue 提供了两种主要方式来实现这一需求：`watch` 和 `watchEffect`。对于较为复杂的逻辑处理或仅需关注指定变量的变化而言，`watch` 是更为合适的选择[^1]。

#### 基本语法结构
为了定义一个观察者函数用于监视某个响应式的源（即被观测的对象），可以在选项式API下的组件配置对象内声明名为 `watch` 的字段，并为其赋值为包含具体回调逻辑的对象字面量：

export default {
    data() {
        return {
            message: 'Hello'
        }
    },
    watch:{
        // 当message发生改变时触发该匿名函数
        message(newValue, oldValue){
            console.log(`新值:${newValue},旧值${oldValue}`);
        }
    }
}

上述代码展示了如何设置对单个属性的监听；每当 `message` 发生更新时都会调用对应的处理器并打印出新的以及之前的取值信息[^2]。

#### 处理数组或其他复杂类型的变动
如果目标是一个集合类别的状态，则可能涉及到更深层次的内容变更检测。此时可以通过传递额外参数给 `handler()` 来开启深度模式，从而捕捉到内部元素级别的修改动作:

data(){
    return{
        list:[{id:'a',name:'Alice'},{id:'b',name:'Bob'}]
    };
},
watch:{
    list:{
        handler(newVal, oldVal){
            console.log('列表已更改');
        },
        deep:true // 开启深层监测
    }
}

这段示例说明了怎样针对具有嵌套特性的 JavaScript 对象实施全面跟踪机制——即使只是其中一部分发生了细微调整也能及时感知到[^3]。

#### 子组件内的应用实例
考虑到实际项目里经常存在父子间通信的需求，下面给出了一种典型的应用案例，展示父级向子级传输动态数值的方式及其伴随而来的同步问题解决方案：

假设有一个叫做 `<ChildComponent>` 的自定义标签代表子部件接收来自外部传入的一个 prop 属性 `countdownTime` 。为了让后者能够有效反映上游提供的最新计数结果，可在前者内部利用 `computed` 或者直接借助于 `watch` 特性完成相应绑定关系的确立：

<!-- Parent Component -->
<template>
  <div class="parent">
      <!-- 将 countdownTime 绑定至 ChildComponent 的 props 上 -->
      <child-component :countdown-time="currentCount"></child-component>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let currentCount = ref(0);
setInterval(() => {
    currentCount.value += 1;
}, 1000);

</script>

<!-- Child Component -->
<template>
  <p>{{localCount}}</p>  
</template>

<script setup lang="ts">
defineProps({
    countdownTime:Number,
});
const localCount=ref(props.countdownTime); 

// 监视props中countdownTime的变化并将之映射到局部state上
watch(()=>props.countdownTime,(newval)=>{
     localCount.value=newval;
});

</script>

此部分阐述了一个完整的双向联动过程，确保无论何时只要父方改变了共享资源的状态，子方都能迅速作出反应并保持一致的表现形式。

uniapp vue3 使用watch监听props

### 如何在 UniApp 中使用 Vue3 的 `watch` 选项监听 props 变化

为了实现这一功能，在组件内部定义 `props` 并通过 `setup` 函数中的 `watch` 方法来监视这些属性的变化。下面是一个具体的例子：

export default {
  props: ['message'], // 定义接收父级传递的数据 message 属性
  setup(props) {
    watch(() => props.message, (newVal, oldVal) => { 
      console.log('Prop changed:', newVal, 'Old value was:', oldVal);
    }, { immediate: true }); // 使用立即执行特性以便首次渲染时也触发回调函数[^1]

    return {};
  }
}

在这个实例里，每当来自父组件的消息 (`message`) 发生改变时，都会打印新的值以及旧的值到控制台。

需要注意的是，当处理对象或数组类型的 prop 更改时，如果只是修改其内部成员而不替换整个变量，则可能不会触发侦听器。对于这种情况，可以考虑深拷贝或者利用更复杂的响应式机制来确保变化能够被检测到并作出反应。