Vue3：watch、watchEffect监听器

1、watch

const inputValue = reactive<Shop>({
  name:'11',
  age:'11',
  sex:'11'
})
//()=>inputValue.name 【对单个属性进行监听】
const stop =  watch(()=>inputValue.name,(value, oldValue, onCleanup)=>{
  console.log(value,oldValue,'我监听到你改变了')
  onCleanup(()=>{
    console.log('监听前的回调')//在监听到第二次改变时执行，第一次也包括 immediate:true
  })
  },{
  deep:true,//开启深度监听，reactive默认开启
  immediate:true,//立即执行
  flush:'pre'//【默认组件加载前调用】//post:组件加载后调用【可以获得dom元素】  sync：同步执行
})
function handleStop(){
  stop()//停止监听
}

2、watchEffect

function handleStop(){
  stop()//停止监听
}
const stop =  watchEffect((onCleanup)=>{//用到谁就监听谁
  onCleanup(()=>{
    console.log('监听前的回调，可清除一些副作用')
  })
  console.log(inputValue.name)//默认立即执行一次
},{
  flush:'pre',//post  sync
  //【调试】
  onTrigger(e){//变动时调用
    console.log(e,'onTrigger')
  },
  onTrack(e){//第一次调用
    console.log(e,'onTrack')
  }
})