想要使用watch监听需要引入watch:
import {watch} from "vue";
监听某一个变量(浅层监听):
watch(变量名, (newValue, oldValue)=>{...})
我们监听变量num,通过输入input去改变num的值:


监听对象中的某一个属性(深度监听):
watch(()=>变量名.value.属性名, (newValue, oldValue)=>{...})


如果我们想要对该对象的所有属性都进行深度监听,则使用如下写法:
watch(变量名, (newValue, oldValue)=>{...}, {deep:true})
我们使用如下写法以后修改person中的所有属性都会触发watch:

注意:开启全属性深度监听会在一定程度上降低代码的性能
程序启动时立即进行一次监听:
watch(变量名, (newValue, oldValue)=>{...}, {deep:true, immediate:true})