关于在Vue3中如何使用watch监听器

`

<template> watch {{ num }} {{ height }} <button @click="add()">+++</button> </template> <script setup> import { ref, watch, watchEffect } from "vue"; let num = ref(0); let height = ref(0); // 侦听器 // watch(要监听的属性名，方法) 手动监听 // watchEffect:不需要明确要监听的数据,页面初始化就去执行 let stopwatch = watch(num, (newval, oldval) => { console.log(newval, oldval); if (newval == 5) { stopwatch(); //停止侦听 } }); let obj = ref({ name: "张三", age: 15, }); // 监控对象中某一项的变化，需要开启深度监听 deep watch( obj, (newval, oldval) => { console.log(newval, oldval); }, { deep: true } ); // 非对象格式监听 let obj2 = ref({ name: "ccc", order: { a: 5, b: 2, }, }); // 参数使用函数的形式写 watch( () => obj2.value.order, (nnn, ooo) => { console.log(nnn, ooo); }, { deep: true } ); let add = () => { num.value++; obj.value.age++; obj2.value.order.a++; height.value++; // obj.value = { // name:'li', // age:66 // } }; // 多个参数监听 watch( [num, () => obj.value], (nnnv, ooov) => { console.log(nnnv, ooov); }, { deep: true } ); watchEffect(() => { console.log(height.value, "watchEffect"); }); </script> <textarea>`