快捷導(dǎo)航

vue3的watch和watchEffect你了解嗎

更新時(shí)間：2022年03月11日 11:41:39 作者：前端菜鳥的每一天

這篇文章主要為大家詳細(xì)介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

watch

結(jié)論1：

watch需要偵聽特定的數(shù)據(jù)源，可以是一個(gè)也可以是多個(gè)，在頁面第一次加載時(shí)不運(yùn)行函數(shù)，只有當(dāng)監(jiān)聽的數(shù)據(jù)源改變時(shí)，才會(huì)運(yùn)行此函數(shù)

結(jié)論2

watch監(jiān)聽一個(gè)對(duì)象的屬性，首先監(jiān)聽的值要以函數(shù)返回值的形式進(jìn)行傳遞監(jiān)聽，不同于vue2形式的監(jiān)聽，如下為對(duì)象屬性5秒后改變，監(jiān)聽函數(shù)打印

在這里插入圖片描述

結(jié)論3

監(jiān)聽多個(gè)數(shù)據(jù)源，是把需要監(jiān)聽的參數(shù)放在watch函數(shù)的數(shù)組中，但是如果是監(jiān)聽多個(gè)數(shù)據(jù)源的話，如果多個(gè)數(shù)據(jù)源同時(shí)改變的話，只觸發(fā)一次監(jiān)聽函數(shù)，如下圖所示

在這里插入圖片描述

這是是兩個(gè)數(shù)據(jù)源同時(shí)發(fā)生改變，但是watch函數(shù)只是觸發(fā)了一次

watchEffect

結(jié)論1

vue官方文檔為了根據(jù)響應(yīng)式狀態(tài)自動(dòng)應(yīng)用和重新應(yīng)用副作用，我們可以使用 watchEffect 函數(shù)。它立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴，并在其依賴變更時(shí)重新運(yùn)行該函數(shù)。

可以看出 watchEffect函數(shù)不需要傳入一個(gè)數(shù)據(jù)源，只需要傳入一個(gè)函數(shù)，在函數(shù)中使用到的響應(yīng)式數(shù)據(jù)，vue都會(huì)追蹤依賴，當(dāng)數(shù)據(jù)改變時(shí)，watchEffect函數(shù)會(huì)再次運(yùn)行，并且watchEffect在頁面第一次加載的時(shí)候就會(huì)運(yùn)行

驗(yàn)證結(jié)論1

在這里插入圖片描述

結(jié)論2 watchEffect 監(jiān)聽多個(gè)數(shù)據(jù)源

監(jiān)聽對(duì)象，無法完成監(jiān)聽

在這里插入圖片描述

監(jiān)聽對(duì)象屬性，可以完成

在這里插入圖片描述

結(jié)論3 watchEffect 停止監(jiān)聽

const stop= watchEffect(()=>{
    })
    stop()

watch 和 watchEffect 的區(qū)別

1.watch是惰性的，頁面第一次加載時(shí)不觸發(fā)watch函數(shù)，只有監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)，才會(huì)觸發(fā)watch函數(shù)

2.watch可以以數(shù)組的形式監(jiān)聽多個(gè)參數(shù)，如果多個(gè)數(shù)據(jù)同時(shí)發(fā)生改變，watch只觸發(fā)一次

3.watch監(jiān)聽reactive數(shù)據(jù)時(shí)，是以（）=>a 這個(gè)形式，目的是監(jiān)聽數(shù)據(jù)的getter函數(shù)，對(duì)于ref定義的數(shù)據(jù)，可以直接監(jiān)聽

4.watch可以獲取監(jiān)聽的數(shù)據(jù)的新值和舊值

5.watchEffect 函數(shù)，在頁面第一次加載時(shí)就會(huì)觸發(fā)，并且會(huì)一直監(jiān)聽追蹤內(nèi)部使用的響應(yīng)式數(shù)據(jù)，只要追蹤的響應(yīng)式數(shù)據(jù)發(fā)生變化，watchEffect 都會(huì)運(yùn)行

6.watchEffect 也可以監(jiān)聽多個(gè)參數(shù)，只是不能監(jiān)聽對(duì)象，因?yàn)樗麩o法監(jiān)測對(duì)象內(nèi)部的變化，可能是watchEffect 無法實(shí)現(xiàn)深度監(jiān)聽吧（具體原因還不清楚）僅記錄平常學(xué)習(xí)