這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下
1.watch偵聽器
引入watch
import { ref, reactive, watch, toRefs } from 'vue'
對基本數(shù)據(jù)類型進行監(jiān)聽----- watch特性：
1.具有一定的惰性lazy 第一次頁面展示的時候不會執(zhí)行，只有數(shù)據(jù)變化的時候才會執(zhí)行
2.參數(shù)可以拿到當前值和原始值
3.可以偵聽多個數(shù)據(jù)的變化，用一個偵聽起承載
setup() {
const name = ref('leilei')
watch(name, (curVal, prevVal) => {
console.log(curVal, prevVal)
})
}
template: `Name: <input v-model="name" />`
對引用類型進行監(jiān)聽-----
setup() {
const nameObj = reactive({name: 'leilei', englishName: 'bob'})
監(jiān)聽一個數(shù)據(jù)
watch(() => nameObj.name, (curVal, prevVal) => {
console.log(curVal, prevVal)
})
監(jiān)聽多個數(shù)據(jù)
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: <input v-model="name" /> englishName: <input v-model="englishName" />`
2.watchEffect
沒有過多的參數(shù) 只有一個回調函數(shù)
1.立即執(zhí)行，沒有惰性，頁面的首次加載就會執(zhí)行。
2.自動檢測內部代碼，代碼中有依賴 便會執(zhí)行
3.不需要傳遞要偵聽的內容 會自動感知代碼依賴，不需要傳遞很多參數(shù)，只要傳遞一個回調函數(shù)
4.不能獲取之前數(shù)據(jù)的值 只能獲取當前值
5.一些=異步的操作放在這里會更加合適
watchEffect(() => {
console.log(nameObj.name)
})
偵聽器的取消 watch 取消偵聽器用法相同
const stop = watchEffect(() => {
console.log(nameObj.name)
setTimeout(() => {
stop()
}, 5000)
})
const stop1 = watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
console.log(curName, curEng, '----', prevName, curEng)
setTimeout(() => {
stop1()
}, 5000)
})
watch也可以變?yōu)榉嵌栊缘?立即執(zhí)行的 添加第三個參數(shù) immediate: true
watch([() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => {
console.log(curName, curEng, '----', prevName, curEng)
setTimeout(() => {
stop1()
}, 5000)
}, {
immediate: true
})
以上就是vue3 watch和watchEffect的使用以及有哪些區(qū)別的詳細內容，更多關于vue3 watch和watchEffect的資料請關注腳本之家其它相關文章！
來源：腳本之家
鏈接：https://www.jb51.net/article/204827.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
