Vue2 and Vue3 use watch listeners in detail

watch Listening for data changes (change events for a value)

vue2.x

 data () {
     return{
         num:10
     }
 } , 
 watch:{
      num:{
	      /*
	       *   newValue: Current value 
           *   oldValue: On modification 1 Engraved value 
	       */
          handler(newValue,oldValue){
          	// doSomething
          } , 
          /*
           * deep:Boolean :  Depth monitoring 
           * 	true:  The change of listening heap is 
           * 	false: Listen only for stack changes ( Default )
           */
          deep:true/false,
          /*
           * immediate:Boolean :  Whether it is in the first 1 Execute when defined for the second time handler Function 
           * 	true:  In the first 1 Execute when defined for the second time handler Function 
           * 	false: Modify before executing handler Function 
           */          
          immediate:true/false
      }      
  }

vue3.x

watch is used to listen for responsive data

Basic use

const num = ref(0)
1.  Import   import {watch} from 'vue'
2.  Use 
	 `const  Return value = watch( Values to listen to , (newVal,oldVal)=>{ }, {deep,immediate,flush})`
	 
	  Return value :  You can turn off listening:   Return value ()
	  Parameter 1:  Values to listen to 
	 			  Basic data type (Number,String,Boolean,null,undefined) :   ()=> Basic data type value 
	 			  Complex data type (Array,Object,Function) : 			 Direct writing /()=> Basic data type value 
	  Parameter 2:  Analogy Vue2 In handler Function 
	  Parameter 3: {} Object ,  You can have a configuration item in an object :deep,immediate,flush,
	 		deep,immediate The meaning of is described above ,  This is mainly about flush Explain the value of :
	 			 `flush:post/sync/pre
      				   pre (Default) : Before rendering, the value changed, and it was not rendered to dom
      				   post: After rendering, the value changes, and it is also rendered to dom
    				   sync: Change 1 Sub-rendering 1 Times, every 1 All times before rendering `
	 		

Note:
In actual development, you can't monitor the use of change system 1

watch(()= > Responsive data, () = > {},{deep:true})

These are the details of how Vue2 and Vue3 use watch listeners. For more information about the use of watch listeners, please pay attention to other related articles on this site!