vue3 watch

watch

• 监视reactive定义的响应式数据时，oldValue无法正确获取，强制开启了深度监视（deep配置无效）
• 监视reactive定义的响应式数据中的某一个属性时，deep配置有效，

setup(){
    let num = ref(0),
  str = ref("strofdn"),
  persons = reactive({
    name:"艾利欧",
    age:21,
    work:{
        mo:{
            award:11
        }
    }
  })


  // 1、 监视ref定义的一个数据
  watch(num,(newVaue,oldVaule)=>{
    console.log()
  },{immediate:true})


  // 2、 监视ref定义的多个数据
  watch([num,str],(newVaue,oldVaule)=>{

  },{immediate:true})


  // 3、 监视reactive定义的数据的全部属性
  //    1. 此处无法正确获取oldvaue
  //    2. 强制开启深度监视（deep）无效
  watch(persons,(newVaue,oldVaule)=>{

  },{deep:true}) // deep:无效


  // 4、 监视reactive定义的数据中的某一个属性
  watch(()=>persons.name,(newVaue,oldVaule)=>{

  })


  // 5、 监视reactive定义的数据中的某些属性
  watch([()=>persons.name,()=>persons.age],(newVaue,oldVaule)=>{

  })


  // 6、 监视一些特殊情况的
  watch(()=>persons.work,(newVaue,oldVaule)=>{

  },{deep:true}) //此处由监视的是reactive定义的数据中的某个属性所以deep有效
}

监视 基本类型时，不需要deep深度监视，
监视 复杂类型时，强制开启深度监视，再设置deep无效 oldVaule无法获取

---

监视 ref 定义的响应式对象

let car = ref({
    size:120,
    propty:{
        color:red,
    }
}),
num = ref(0)

// num无需 num.value. 因为num是基本数据类型，

watch(num,(newVaue,oldVaule)=>{})



// 监视car 
//car.value 监听的是借助reactive生成的值， car.value值是proxy，所以是生层次的，自动开启了强制deep
1. watch(car.value,(newVaue,oldVaule)=>{}) // 方法1

2. watch(car,(newVaue,oldVaule)=>{},{deep:true}) //方法2