Detailed explanation of the watch listener example in vue3.0

<template>
  <h1>watch listener page</h1>
  <p>Normal listening data: {{ num }}</p>
  <button @click="butFn">Click</button>
</template>

import { ref, watch } from 'vue'
// Remember to import whatever new features of Vue3 you need, and call setup() as needed {
 
    const num = ref(0)
    // watch (data to be listened, callback function)
    watch(num, (v1, v2) => {
      // v1 is the new value after the change // v2 is the value before the change console.log(v1, v2)
      // Key points: Listening to ordinary functions can obtain the values ​​before and after modification, and the data being listened to must be responsive})
    
    // Single machine event const butFn = () => {
      num.value++
    }
    
     return { butFn, num }
}

    const num = ref(0)
    const num2 = ref(20)
    
    watch([num, num2], (v1, v2) => {
      // The result stored is an array, and the result returned is also an array formatted result // v1 is the array of the latest results // v2 is the array of old data console.log('v1', v1, 'v2', v2)
    // Summary: You can get the values ​​before and after the update, and the listening result is also consistent with the order of array data})

	const obj = reactive({
      msg: 'Strange and cute'
    })
    
   watch(obj, () => {
      // Only the latest value can be obtained console.log(obj.msg)
    })

	const obj = reactive({
      msg: 'Strange and cute'
    })
    
	watch(() => obj.msg,(v1, v2) => {
        // v1 is the latest value of the monitored data // v2 is the original value of the monitored data console.log(v1, v2)
        // Summary: If you listen to a property in an object, you need to use the arrow function // Listening to less data is beneficial to improve performance}
    )

   const obj = reactive({
      msg: {
        info: 'ooo'
      }
    })
   watch(() => obj.msg,(v1, v2) => {
        console.log(v1, v2)
      },
      {
        // The first rendering of the component triggers immediate: true,
        // Turn on deep monitoring, if the data in the object changes, it will also be monitored // If the monitored data is a relatively long expression, you need to use a function // But after writing it in function form, the inner data cannot change, so you need to add the deep option deep: true
      }
    )