监听属性
和Vue2的监听相同，Vue3中也可以监听数据
注意，监听的数据必须是响应式变量，也就是ref或者reactive
监听一般的变量
<template>
<div>{{ num }}</div>
<button @click="changeNum">按钮</button>
</template>
<script setup lang='ts'>
// 注意导入ref和watch
import {ref, watch} from "vue";
let text1=ref(0);
// 函数
function changeNum(){
text1.value+=1;
}
// 监听
// newVal: 新的值 oldVal: 旧的值
watch(sum, (newVal, oldVal)=>{
})
</script>监听对象
如果你使用reactive来定义的Object，那么直接按照一般的变量方法来监听变量即可
和Vue2一样，默认的watch不会监听由ref定义Object对象内部的参数值，因此如果只是修改key，并不会触发watch
如果需要深度监听某个Object对象，需要添加参数
<script setup lang="ts">
import {ref, watch} from "vue";
var obj=ref({
name: '张三',
age: 20
})
function changeName(age){
obj.value.age=age;
}
watch(obj, (newVal, oldVal){
console.log("obj changed!");
}, {deep: true})
</script>同样的，和Vue2一样，如果只是修改由ref定义的Object对象的某个参数，那么oldValue和newValue值是完全一样的
停止监听
const stopWatch=watch(sum, (newVal, oldVal)=>{
if(newVal>10){
stopWatch();
}
})