VUE3 watch写法与属性

1、页面初始化时调用调用watch监听需添加immediate属性

export default{
    
    
  data(){
    
    
    return{
    
    
      name:'id'
    }
  },
  watch:{
    
    
    name:{
    
    
      immediate:true,//为true页面初始化时调用调用
      handler:function(newVal){
    
    
        console.log(newVal)
      }
    }
  }
}

2、当数据为对象时需要添加deep属性深度监听

export default{
    
    
  data(){
    
    
    return{
    
    
      information:{
    
    
        name:'cl',
        age:'25'
      }
    }
  },
  watch:{
    
    
    information:{
    
    
      deep:true,// 深度监听 会一层层向下遍历
      handler:function(newVal){
    
    
        console.log(newVal)
      }
    }
  }
}

3、当数据为对象时监听对象中的某一个属性变化

export default{
    
    
  data(){
    
    
    return{
    
    
      information:{
    
    
        name:'cl',
        age:'25'
      }
    }
  },
  watch:{
    
    
    'information.age':{
    
    
      deep:true,
      handler:function(newVal){
    
    
        console.log(newVal)
      }
    }
  }
}