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侦听器问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。