WatchEffect for beginners of vue3

I learned the usage of Watch in VUe3 last time. This time I brought a very special API watchEffect, which can also be used to monitor attributes, but its special feature is that it can monitor changes of certain attributes. And it doesn’t get oldValue, and it detects when the property that you’re using changes, very clever.

The use of the watchEffectexport default {
  name: 'App'.components: {
    HelloWorld
  },
  setup(){
    let msgData = ' ';
    let person = reactive({
      name:'big dog'.age:18
    })
   
    watchEffect(() = >{
      console.log('name',person)
    })
    const editName = () = >{
      person.age++
    }
    return{ updateData, ... toRefs(person), editName } } }Copy the code

WatchEffect writes directly to the callback function, which monitors property changes in real time. This API is handy when you want to listen for multiple properties. Write the logic of the property you are listening to in the callback function.

1.WatchEffect does not require manually passing in dependencies2WatchEffect is executed once to automatically collect dependencies3WatchEffect does not get the pre-change value, only the post-change valueCopy the code