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

【Vue2和Vue3如何使用watch侦听器详解】watch:侦听数据变化（某个值的change事件）
vue2.x

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}}

vue3.x watch用于监听响应式的数据
基本使用

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/prepre（默认值）:渲染前，值改变了，没有渲染到dompost:渲染后，值改变了，也渲染到domsync:改变一次渲染一次，每一次都是渲染前`

注意点：
实际开发中监听不到变化统一使用