watch

結論1：

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

結論2

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

結論3

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

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

watchEffect

結論1

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

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

驗證結論1

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

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

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

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

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

watch 和 watchEffect 的區(qū)別

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

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

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

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

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

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

總結

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

最新評論