脚本宝典收集整理的这篇文章主要介绍了Vue2和Vue3如何使用watch侦听器详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
watch:侦听数据变化 （某个值的change事件）
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
}
}
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侦听器详解的详细内容，更多关于watch侦听器使用的资料请关注脚本宝典其它相关文章！
以上是脚本宝典为你收集整理的Vue2和Vue3如何使用watch侦听器详解全部内容，希望文章能够帮你解决Vue2和Vue3如何使用watch侦听器详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。