vue3 watch和watchEffect的使用以及有哪些區(qū)別
1.watch偵聽器
引入watch
import { ref, reactive, watch, toRefs } from 'vue'
對(duì)基本數(shù)據(jù)類型進(jìn)行監(jiān)聽----- watch特性：
1.具有一定的惰性lazy 第一次頁(yè)面展示的時(shí)候不會(huì)執(zhí)行，只有數(shù)據(jù)變化的時(shí)候才會(huì)執(zhí)行
2.參數(shù)可以拿到當(dāng)前值和原始值
3.可以偵聽多個(gè)數(shù)據(jù)的變化，用一個(gè)偵聽起承載
setup() {
const name = ref('leilei')
watch(name, (curVal, prevVal) => {
console.log(curVal, prevVal)
})
}
template: `Name: <input v-model="name" />`
對(duì)引用類型進(jìn)行監(jiān)聽-----
setup() {
const nameObj = reactive({name: 'leilei', englishName: 'bob'})
監(jiān)聽一個(gè)數(shù)據(jù)
watch(() => nameObj.name, (curVal, prevVal) => {
console.log(curVal, prevVal)
})
監(jiān)聽多個(gè)數(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ù) 只有一個(gè)回調(diào)函數(shù)
1.立即執(zhí)行，沒有惰性，頁(yè)面的首次加載就會(huì)執(zhí)行。
2.自動(dòng)檢測(cè)內(nèi)部代碼，代碼中有依賴 便會(huì)執(zhí)行
3.不需要傳遞要偵聽的內(nèi)容 會(huì)自動(dòng)感知代碼依賴，不需要傳遞很多參數(shù)，只要傳遞一個(gè)回調(diào)函數(shù)
4.不能獲取之前數(shù)據(jù)的值 只能獲取當(dāng)前值
5.一些=異步的操作放在這里會(huì)更加合適
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í)行的 添加第三個(gè)參數(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ū)別的詳細(xì)內(nèi)容，更多關(guān)于vue3 watch和watchEffect的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于vue.js發(fā)布后路徑引用的問題解決
最近在vue.js項(xiàng)目發(fā)布后發(fā)現(xiàn)了一個(gè)關(guān)于路徑的問題，發(fā)現(xiàn)網(wǎng)上關(guān)于這個(gè)的資料較少，所以給大家總結(jié)下，下面這篇文章主要給大家介紹了如何解決關(guān)于vue.js發(fā)布后路徑引用的問題，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue中路由傳參6種方式，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)戰(zhàn)中的一些實(shí)用小魔法匯總
這篇文章主要給大家介紹了關(guān)于vue實(shí)戰(zhàn)中一些實(shí)用小魔法的相關(guān)資料,這些技巧和竅門,可以幫助你成為更好的Vue開發(fā)人員,需要的朋友可以參考下2021-06-06
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了vuex與組件聯(lián)合使用的方法,需要的朋友可以參考下2018-05-05
vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue中用watch一次監(jiān)聽多個(gè)值變化的示例詳解
在Vue中,watch 本身不能監(jiān)聽多個(gè)變量,但我們可以通過返回具有計(jì)算屬性的對(duì)象然后監(jiān)聽該對(duì)象,從而實(shí)現(xiàn)一次性“監(jiān)聽多個(gè)變量”,本文給大家介紹了Vue中用watch一次監(jiān)聽兩個(gè)值變化的示例,需要的朋友可以參考下2024-01-01
VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫(kù)的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫(kù)展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫(kù)，剛開始就只會(huì)下載圖標(biāo)使用，需要的朋友可以參考下2021-10-10
詳解Vue項(xiàng)目引入CreateJS的方法（親測(cè)可用）
CreateJS是基于HTML5開發(fā)的一套模塊化的庫(kù)和工具。這篇文章主要介紹了Vue項(xiàng)目引入CreateJS的方法（親測(cè)）,需要的朋友可以參考下2019-05-05
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08