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

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

watch(()=>响应式数据,()=>{},{deep:true})

关于Vue2和Vue3怎么使用watch侦听器问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注行业资讯频道了解更多相关知识。