vue3 watch和watchEffect的使用以及有哪些区别
1.watch侦听器
引入watch
import{ref,reactive,watch,toRefs}from'vue'
对基本数据类型进行监听-----watch特性：
1.具有一定的惰性lazy第一次页面展示的时候不会执行，只有数据变化的时候才会执行
2.参数可以拿到当前值和原始值
3.可以侦听多个数据的变化，用一个侦听起承载
setup(){
constname=ref('leilei')
watch(name,(curVal,prevVal)=>{
console.log(curVal,prevVal)
})
}
template:`Name:
对引用类型进行监听-----
setup(){
constnameObj=reactive({name:'leilei',englishName:'bob'})
监听一个数据
watch(()=>nameObj.name,(curVal,prevVal)=>{
console.log(curVal,prevVal)
})
监听多个数据
watch([()=>nameObj.name,()=>nameObj.name],([curName,curEng],[prevName,curEng])=>{
console.log(curName,curEng,'----',prevName,curEng)
setTimeout(()=>{
stop1()
},5000)
})
const{name,englishName}=toRefs(nameObj)
}
template:`Name:
2.watchEffect
没有过多的参数只有一个回调函数
1.立即执行，没有惰性，页面的首次加载就会执行。
2.自动检测内部代码，代码中有依赖便会执行
3.不需要传递要侦听的内容会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
4.不能获取之前数据的值只能获取当前值
5.一些=异步的操作放在这里会更加合适
watchEffect(()=>{
console.log(nameObj.name)
})
侦听器的取消watch取消侦听器用法相同
conststop=watchEffect(()=>{
console.log(nameObj.name)
setTimeout(()=>{
stop()
},5000)
})
conststop1=watch([()=>nameObj.name,()=>nameObj.name],([curName,curEng],[prevName,curEng])=>{
console.log(curName,curEng,'----',prevName,curEng)
setTimeout(()=>{
stop1()
},5000)
})
watch也可以变为非惰性的立即执行的添加第三个参数immediate:true
watch([()=>nameObj.name,()=>nameObj.name],([curName,curEng],[prevName,curEng])=>{
console.log(curName,curEng,'----',prevName,curEng)
setTimeout(()=>{
stop1()
},5000)
},{
immediate:true
})
以上就是vue3watch和watchEffect的使用以及有哪些区别的详细内容，更多关于vue3watch和watchEffect的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。