uniapp 小程序使用watch ,请用vue3写法

在Vue3中，watch的使用方法与Vue2有所不同。下面是在uniapp小程序中使用Vue3的watch的示例代码：

1. 在组件或页面的setup函数中定义要监听的属性，例如：

import { ref, watch } from 'vue'

export default {
  setup() {
    const message = ref('')
    const count = ref(0)

    watch(message, (newVal, oldVal) => {
      console.log('message changed:', newVal, oldVal)
    })

    watch(count, (newVal, oldVal) => {
      console.log('count changed:', newVal, oldVal)
    })

    return {
      message,
      count
    }
  }
}

2. 在组件或页面中修改该属性时，watch会自动触发相应的操作，例如：

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('')
    const count = ref(0)

    watch(message, (newVal, oldVal) => {
      console.log('message changed:', newVal, oldVal)
    })

    watch(count, (newVal, oldVal) => {
      console.log('count changed:', newVal, oldVal)
    })

    const updateMessage = () => {
      message.value = 'Hello, world!'
    }

    const increaseCount = () => {
      count.value++
    }

    return {
      message,
      count,
      updateMessage,
      increaseCount
    }
  }
}

当调用updateMessage方法时，watch会输出'message changed: Hello, world! ,'。当调用increaseCount方法时，watch会输出'count changed: 1, 0'。

需要注意的是，Vue3中使用watch需要引入watch函数，并且需要使用ref或reactive将数据包装起来，才能进行监听。另外，Vue3中的watch默认是深度监听，无需设置deep选项。