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>

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