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)
      }
    }
  }
}