您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue3中的watch和watchEffect如何用”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue3中的watch和watchEffect如何用”文章能幫助大家解決問題。
1、watch 是惰性執(zhí)行,而 watchEffect 不是,不考慮 watch 的第三個(gè)參數(shù)配置的情況,watch 在組件第一次執(zhí)行的時(shí)候是不會(huì)執(zhí)行的,只有在之后依賴項(xiàng)變化的時(shí)候再執(zhí)行,而 watchEffect 是在程序執(zhí)行到此處的時(shí)候就立即執(zhí)行,而后再響應(yīng)其依賴變化執(zhí)行。
2、兩者的使用方式不同,watch 一般傳入兩個(gè)參數(shù),第一個(gè)參數(shù)是說明什么狀態(tài)應(yīng)該觸發(fā)偵聽器重新運(yùn)行,第二個(gè)參數(shù)定義偵聽器回調(diào)函數(shù),并且該回調(diào)函數(shù)還可以接受兩個(gè)參數(shù),指向狀態(tài)變化前后的值,這樣我們就可以看到狀態(tài)前后的變化,而在 watchEffect 則看不到,并且也不能像 watch 那樣在第一個(gè)參數(shù)更具體地定義依賴項(xiàng)。
3、watch 只能監(jiān)聽響應(yīng)性數(shù)據(jù) reactive 和 ref 定義的值,若要監(jiān)聽一個(gè)單一的值,需要傳遞相應(yīng)值的 getter 函數(shù),而 watchEffect 不能監(jiān)聽 reactive 和 ref 定義的值,只能監(jiān)聽其對(duì)應(yīng)的具體的值(感覺說起來有點(diǎn)繞,看下面的代碼)。
watch :
1、讓 watch 和 watchEffect 監(jiān)聽 reactive 定義的值:
watch:
setup() { const state = reactive({ count: 0, attr: { name: "" } }); watch(state, (post, pre) => { console.log(post); console.log(pre); console.log("watch 執(zhí)行了"); }); const clickEvent = () => { state.count++; }; return { clickEvent }; }
當(dāng)觸發(fā) clickEvent 事件改變 state.count 的值時(shí),我們可以從控制臺(tái)中看到如下結(jié)果,說明 watch 響應(yīng)了 state.count 的變化,但是在初始的時(shí)候并沒有執(zhí)行。
watchEffect:
setup() { const state = reactive({ count: 0, attr: { name: "" } }); watchEffect(() => { console.log("watchEffect 執(zhí)行了"); console.log(state); }); const clickEvent = () => { state.count++; }; return { clickEvent }; }
點(diǎn)擊多次按鈕觸發(fā) clickEvent 事件,控制臺(tái)結(jié)果如下,說明 watchEffect 在組件第一次執(zhí)行的時(shí)候執(zhí)行了回調(diào),而在之后并不再響應(yīng) state.count 的變化。
說明 watch 可以監(jiān)聽 reactive 定義的值,而 watchEffect 不能。
2、讓 watch 和 watchEffect 監(jiān)聽 ref 定義的值。
watch:
setup(){ const count = ref(0); watch(count, (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); }); const clickEvent = () => { count.value++; }; return { clickEvent }; }
結(jié)果:
watchEffect:
setup(){ const count = ref(0); watchEffect(() => { console.log("watchEffect 執(zhí)行了"); console.log(count); }); const clickEvent = () => { count.value++; }; return { clickEvent }; }
結(jié)果:
結(jié)果同上,說明 watch 可以響應(yīng) ref 定義的值,而 watchEffect 則不能。
2、讓 watch 和 watchEffect 響應(yīng)單一值的變化:
watch:
setup(){ const state = reactive({ count: 0 }); watch(state.count, (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); }); const clickEvent = () => { state.count++; }; return { clickEvent }; }
結(jié)果顯示無論怎么觸發(fā) clickEvent 事件,watch中的回調(diào)函數(shù)都不會(huì)觸發(fā),控制臺(tái)不會(huì)打印任何內(nèi)容。
watchEffect:
setup(){ const state = reactive({ count: 0 }); watchEffect(() => { console.log("watchEffect 執(zhí)行了"); console.log(state.count); }); const clickEvent = () => { state.count++; }; return { clickEvent }; }
控制臺(tái)結(jié)果:
說明 watchEffect 能響應(yīng)單一的值,而 watch 不能,若要讓 watch 響應(yīng) count 的變化,需要給第一個(gè)參數(shù)傳入 getter 函數(shù),如下:
setup(){ const state = reactive({ count: 0 }); watch( () => state.count, (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); } ); const clickEvent = () => { state.count++; }; return { clickEvent }; }
如果 getter 函數(shù) 返回的是 state 引用值,而在改變 state.count 的時(shí)候并不會(huì)修改 state 的引用值,因此不會(huì)響應(yīng) state.count 的變化,如果要響應(yīng),需要傳入第三個(gè)參數(shù)配置 {deep:true},同時(shí)代碼中的 post 和 pre 的值是一樣的,如下:
setup(){ const state = reactive({ count: 0 }); //不會(huì)響應(yīng)變化 watch( () => state, (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); } ); const clickEvent = () => { state.count++; }; return { clickEvent }; }
setup(){ const state = reactive({ count: 0 }); //加上了 {deep:true} 可以響應(yīng)變化 watch( () => state, (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); }, {deep:true} ); const clickEvent = () => { state.count++; }; return { clickEvent }; }
若返回的是引用值,而又需要比較變化前后不同的值,則需要傳入 getter 函數(shù)返回該對(duì)象的深拷貝后的值,如下例子,返回一個(gè)數(shù)組:
setup(){ const state = reactive({ count: 0 }); const numbers = reactive([0, 1, 2, 3]); watch( () => [...numbers], (post, pre) => { console.log("watch 執(zhí)行了"); console.log(post); console.log(pre); } ); const clickEvent = () => { numbers.push(1); }; return { clickEvent }; }
控制臺(tái)的結(jié)果:
關(guān)于“vue3中的watch和watchEffect如何用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。