Vue2和Vue3如何使用watch侦听器详解

 data（）{     return{         num:10     } }， watch:{      num:{	      /*	       *   newValue:当前值           *   oldValue:修改上一刻的值	       */          handler(newValue,oldValue){          	// doSomething          }，          /*           * deep:Boolean : 深度监听           * 	true: 监听堆的改变就           * 	false:只监听栈的改变(默认)           */          deep:true/false,          /*           * immediate:Boolean : 是否在第一次定义时就执行handler函数           * 	true: 在第一次定义时就执行handler函数           * 	false:修改后再执行handler函数           */                    immediate:true/false      }        }

const num = ref(0)1. 导入  import {watch} from 'vue'2. 使用	 `const 返回值= watch(需要监听的值, (newVal,oldVal)=>{ }, {deep,immediate,flush})`	 	 返回值: 可以关闭监听： 返回值()	 参数一: 需要监听的值	 			 基本数据类型(Number,String,Boolean,null,undefined)：  ()=>基本数据类型值	 			 复杂数据类型(Array,Object,Function)：			直接写/()=>基本数据类型值	 参数二: 类比Vue2中的handler函数	 参数三: {}对象, 对象中可以有个配置项:deep,immediate,flush,	 		deep,immediate的意思上面有过描述, 这里主要对flush的取值做说明:	 			 `flush:post/sync/pre      				   pre（默认值）:渲染前，值改变了，没有渲染到dom      				   post:渲染后，值改变了，也渲染到dom    				   sync:改变一次渲染一次，每一次都是渲染前`