watch

結(jié)論1：

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

結(jié)論2

watch監(jiān)聽一個(gè)對象的屬性，首先監(jiān)聽的值要以函數(shù)返回值的形式進(jìn)行傳遞監(jiān)聽，不同于vue2形式的監(jiān)聽，如下為對象屬性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都會追蹤依賴，當(dāng)數(shù)據(jù)改變時(shí)，watchEffect函數(shù)會再次運(yùn)行，并且watchEffect在頁面第一次加載的時(shí)候就會運(yùn)行

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

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

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

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

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

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

watch 和 watchEffect 的區(qū)別

1.watch是惰性的，頁面第一次加載時(shí)不觸發(fā)watch函數(shù)，只有監(jiān)聽的數(shù)據(jù)發(fā)生變化時(shí)，才會觸發(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ù)，對于ref定義的數(shù)據(jù)，可以直接監(jiān)聽

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

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

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!