Vue3.0|Vue3.0的多种侦听方式 vue.js|javascript

目录
一、wacthEffect
二、watch
1.1第一种方式侦听
1.2第二种方式侦听
1.3侦听多个数据源
一、wacthEffect

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

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

二、watch

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

// 指定主要侦听的值num watch(num,(val,oval)=>{ // val:新值,oval:之前的值 // console.log(num.value); // console.log(val,oval); },{//第二个参数obj immediate,deep immediate: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.uname watch(()=>state.uname,(uname,p)=>{ //uname新值,p旧值 console.log(uname,p); },{ immediate:true })

1.3侦听多个数据源

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

最后
如果对您有帮助，希望能给个评论收藏三连！
想跟博主交朋友的可以通过查找，公_号?：前端老实人，联系到博主并获取更多资料
博主为人老实，无偿解答问题哦?
【Vue3.0|Vue3.0的多种侦听方式】