一、computed

在前面我們講解過計算屬性computed：當我們的某些屬性是依賴其他狀態時，我們可以使用計算屬性來處理

• 在前面的Options API中，我們是使用computed選項來完成的；
• 在Composition API中，我們可以在 setup 函數中使用 computed 方法來編寫一個計算屬性；

如何使用computed呢？

• 方式一：接收一個getter函數，并為 getter 函數返回的值，返回一個不變的 ref 對象；
  

• 方式二：接收一個具有 get 和 set 的對象，返回一個可變的（可讀寫）ref 對象；
  

二、偵聽數據的變化

在前面的Options API中，我們可以通過watch選項來偵聽data或者props的數據變化，當數據變化時執行某一些操作。

在Composition API中，我們可以使用watchEffect和watch來完成響應式數據的偵聽；

• watchEffect用于自動收集響應式數據的依賴；
• watch需要手動指定偵聽的數據源；

三、watchEffect

當偵聽到某些響應式數據變化時，我們希望執行某些操作，這個時候可以使用 watchEffect。

我們來看一個案例：

• 首先，watchEffect傳入的函數會被立即執行一次，并且在執行的過程中會收集依賴；
• 其次，只有收集的依賴發生變化時，watchEffect傳入的函數才會再次執行；
  

四、watchEffect的停止偵聽

如果在發生某些情況下，我們希望停止偵聽，這個時候我們可以獲取watchEffect的返回值函數，調用該函數即可。

比如在上面的案例中，我們age達到20的時候就停止偵聽：

五、watchEffect清除副作用

什么是清除副作用呢？
比如在開發中我們需要在偵聽函數中執行網絡請求，但是在網絡請求還沒有達到的時候，我們停止了偵聽器，或者偵聽器偵聽函數被再次執行了。
那么上一次的網絡請求應該被取消掉，這個時候我們就可以清除上一次的副作用；

在我們給watchEffect傳入的函數被回調時，其實可以獲取到一個參數：onInvalidate

• 當副作用即將重新執行 或者 偵聽器被停止 時會執行該函數傳入的回調函數；
• 我們可以在傳入的回調函數中，執行一些清除工作；
  
  

六、setup中使用ref

在講解 watchEffect執行時機之前，我們先補充一個知識：在setup中如何使用ref或者元素或者組件？

• 其實非常簡單，我們只需要定義一個ref對象，綁定到元素或者組件的ref屬性上即可；

七、watchEffect的執行時機

默認情況下，組件的更新會在副作用函數執行之前：

• 如果我們希望在副作用函數中獲取到元素，是否可行呢？
  

我們會發現打印結果打印了兩次：

• 這是因為setup函數在執行時就會立即執行傳入的副作用函數，這個時候DOM并沒有掛載，所以打印為null；
• 而當DOM掛載時，會給title的ref對象賦值新的值，副作用函數會再次執行，打印出來對應的元素；

八、調整watchEffect的執行時機

如果我們希望在第一次的時候就打印出來對應的元素呢？

• 這個時候我們需要改變副作用函數的執行時機；
• 它的默認值是pre，它會在元素 掛載 或者 更新 之前執行；
• 所以我們會先打印出來一個空的，當依賴的title發生改變時，就會再次執行一次，打印出元素；

我們可以設置副作用函數的執行時機：

flush 選項還接受 sync，這將強制效果始終同步觸發。然而，這是低效的，應該很少需要。

九、Watch的使用

watch的API完全等同于組件watch選項的Property：

• watch需要偵聽特定的數據源，并在回調函數中執行副作用；
• 默認情況下它是惰性的，只有當被偵聽的源發生變化時才會執行回調；

與watchEffect的比較，watch允許我們：

• 懶執行副作用（第一次不會直接執行）；
• 更具體的說明當哪些狀態發生變化時，觸發偵聽器的執行；
• 訪問偵聽狀態變化前后的值；

十、偵聽單個數據源

watch偵聽函數的數據源有兩種類型：

• 一個getter函數：但是該getter函數必須引用可響應式的對象（比如reactive或者ref）；
  

• 直接寫入一個可響應式的對象，reactive或者ref（比較常用的是ref）；
  注意：
  如果傳入的是reactive響應式對象，取到的值也是reactive對象
  
  注意：
  如果傳入的是reactive響應式對象，想要解構reactive對象，將其變成普通對象，可以用以下方法：
  
  注意：
  如果傳入的是ref響應式對象，取到的值直接就是value，而不是ref對象
  

十一、偵聽多個數據源

偵聽器還可以使用數組同時偵聽多個源：

十二、偵聽響應式對象

如果我們希望偵聽一個數組或者對象，那么可以使用一個getter函數，并且對可響應對象進行解構：

十三、watch的選項

如果我們希望偵聽一個深層的偵聽，那么依然需要設置 deep 為true：

• 也可以傳入 immediate 立即執行；
  
  
  
  

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Vue3 Composition API（二）——computed、watchEffect、setup中使用ref的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。