首页>>前端>>Vue->Vue3.0的多种侦听方式(全)

Vue3.0的多种侦听方式(全)

时间:2023-11-29 本站 点击:1

一、wacthEffect

立即执行,没有immediate

侦听,watchEffect是立即执行的,没有immediate,不需要传递侦听的内容,自动会感知代码依赖,不需要传参,只需要传一个回调函数不能获取之前的值

如果需要停用侦听器,可以回调这个侦听器函数

conststop=watchEffect(()=>{//console.log('num:',num.value);//console.log('num:',str.value);})

二、watch

不会立即执行,需要手动开启immediate

//指定主要侦听的值numwatch(num,(val,oval)=>{//val:新值,oval:之前的值//console.log(num.value);//console.log(val,oval);},{//第二个参数objimmediate,deepimmediate:true//默认就是只有数据改变时才会监听,//第一次创建的时候不会执行,设置成true,第一次就会执行})

侦听ref的数据源

侦听reactive数据源

1.1第一种方式侦听

//侦听state下的id,对象数据的变化watch(state,(val,oval)=>{//console.log('id',val.id,oval);},{immediate:true,deep:true//开启深度监听,能够侦听到对象属性值的变化})

1.2第二种方式侦听

//侦听state.unamewatch(()=>state.uname,(uname,p)=>{//uname新值,p旧值console.log(uname,p);},{immediate:true})

1.3侦听多个数据源

//侦听多个数据(id,uname)//()=>state.id,相当于//object.values(toRefs(state))解构了conststop=watch([()=>state.id,()=>state.uname],([id,uname],[oid,oname])=>{//id新,oid旧console.log('id',id,oid);//uname新,oname旧console.log('uname',uname,oname);})

最后

如果对您有帮助,希望能给个?评论收藏三连!

博主为人老实,无偿解答问题哦❤


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/840.html