Learn the usage of VuE3 watch

The use of Wacth in VUE3 has many minor details to pay attention to. Here is a summary of its various uses, there is always one you will like.

Watch (sum, sum)(newValue,oldValue) = >{
console.log(newValue,oldValue)
})
Copy the code

Watch ([sum, MSG],(newValue,oldValue) = >{
console.log(newValue,oldValue)
})
Copy the code

Case 3: Monitoring reactive data defined by Reactive, the correct oldValue cannot be obtained, and the depth detection is automatically enabled, and the deep configuration is invalid watch(person,(newValue,oldValue) = >{
console.log(newValue,oldValue)
})
Copy the code

Monitor a property of reactive data defined by Reactive watch(() = >person.name,(newValue,oldValue) = >{
      console.log('newValue',newValue,oldValue)
    })
Copy the code

Special case, monitoring properties of a reference type data in reactive data defined by Reactive() = >person.name,(newValue,oldValue) = >{
      console.log('newValue',newValue,oldValue)
    },deep:true)
Copy the code

Usage of watch in vue2watch: {name(newValue,oldValue){
  console.log('newValue'Or, newValue oldValue)}name: {hander(newValue,oldValue){
 console.log('newValue',newValue,oldValue)
},
deep:true //true
immediate: true}}Copy the code

The usage of Watch in VUe3 is slightly different from that in VUe2. Vue3 uses the combined API, which is very convenient when listening to multiple attributes. Although it may not be used very well,vue3 will gradually replace VUe2 in the future development. So next we need to get used to the use of some of vue3’s attributes and slowly migrate vue2 into VUe3.