vue3，watch监听使用总结。

情况一 ：监听ref所定义的一个响应式数据

  const name = ref('张三')
  watch(name, (newVal, oldVal) => {
    
    
      console.log('name的值变化了',newVal, oldVal)
    },{
    
    immediate:true})

情况二：监听ref定义多个响应式数据

  const name = ref('张三')
  //参数一改为数组形式
  watch([name,age], (newVal, oldVal) => {
    
    
      console.log('name或者age的值变化了',newVal, oldVal)
    },{
    
    immediate:true})

情况三：监听reactive所定义的一个响应式数据的全部属性
注意一：此处无法正确获取oldVal
注意二：强制开启deep:true （deep配置失效）

情况四：监听reactive响应式数据中的某个属性，要将箭头函数写成函数return的方式才有效，一定不要踩坑哦！

 watch(perspn, (newVal, oldVal) => {
    
    
      console.log(newVal, oldVal)
    },{
    
    deep:false}) //deep:false 配置失效

   const p = reactive({
    
    
      name: 'zs',
      age: 18
    })
    //()=>p.name 为要监听的函数
    watch(() => p.name, (newVal, oldVal) => {
    
    
      console.log(newVal, oldVal)
    })