vue中watch的作用,vue中watch的使用方法
本文主要介绍vue3 watch和watchEffect的使用方法以及两者的区别，帮助大家更好的理解和学习vue框架。感兴趣的朋友可以了解一下。
1.watch侦听器
腕表简介
从“vue”导入{ ref，reactive，watch，toRefs }
监控基本数据类型-监控功能：
1.具有一定惯性的lazy在页面第一次显示时不会执行，只有在数据发生变化时才会执行。
2.参数可以得到当前值和原始值。
3.您可以监听多个数据的变化，并使用一个监听器来启动加载。
setup() {
const name=ref(雷磊)
手表(名称，(曲线，前值)={
console.log(curVal，prevVal)
})
}
模板：` name:input v-model= name /` 1
监听引用类型-
setup() {
const name obj=reactive({姓名：雷磊，英文姓名：鲍勃 })
监控一个数据
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(()={
停止1()
}, 5000)
})
const { name，englishName }=toRefs(nameObj)
}
模板：` name:input v-model= name /English name:input v-model= English name /`
2.watchEffect
没有太多参数，只有一个回调函数。
1.立即执行。如果没有惯性，将执行页面的第一次加载。
2.自动检测内部代码，如果代码中存在依赖，就会执行。
3.你不需要传递你想听的，你会自动感知代码依赖。不需要传递很多参数，只需要传递一个回调函数。
4.不能得到以前数据的值，只能得到当前值。
5.一些=异步操作在这里会更合适
watchEffect(()={
console.log(nameObj.name)
})
侦听器的取消观察取消侦听器用法是相同的。
const stop=watchEffect(()={
console.log(nameObj.name)
setTimeout(()={
停止()
}, 5000)
})
const stop 1=watch([()=name obj . name，()=nameObj.name]，([curName，curEng]，[prevName，curEng])={
console.log(curName，curEng，-，prevName，curEng)
setTimeout(()={
停止1()
}, 5000)
})
观看也可以成为一种非惰性的、立即的执行。添加第三个参数immediate: true。
watch([()=nameObj.name，()=nameObj.name]，([curName，curEng]，[prevName，curEng])={
console.log(curName，curEng，-，prevName，curEng)
setTimeout(()={
停止1()
}, 5000)
}, {
即时：正确
})
以上就是vue3 watch和watchEffect的使用细节和区别。更多关于vue3 watch和watchEffect的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。