一、computed

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

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

如何使用computed呢？

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

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

二、偵聽數(shù)據(jù)的變化

在前面的Options API中，我們可以通過watch選項來偵聽data或者props的數(shù)據(jù)變化，當(dāng)數(shù)據(jù)變化時執(zhí)行某一些操作。

在Composition API中，我們可以使用watchEffect和watch來完成響應(yīng)式數(shù)據(jù)的偵聽；

• watchEffect用于自動收集響應(yīng)式數(shù)據(jù)的依賴；
• watch需要手動指定偵聽的數(shù)據(jù)源；

三、watchEffect

當(dāng)偵聽到某些響應(yīng)式數(shù)據(jù)變化時，我們希望執(zhí)行某些操作，這個時候可以使用 watchEffect。

我們來看一個案例：

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

四、watchEffect的停止偵聽

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

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

五、watchEffect清除副作用

什么是清除副作用呢？
比如在開發(fā)中我們需要在偵聽函數(shù)中執(zhí)行網(wǎng)絡(luò)請求，但是在網(wǎng)絡(luò)請求還沒有達(dá)到的時候，我們停止了偵聽器，或者偵聽器偵聽函數(shù)被再次執(zhí)行了。
那么上一次的網(wǎng)絡(luò)請求應(yīng)該被取消掉，這個時候我們就可以清除上一次的副作用；

在我們給watchEffect傳入的函數(shù)被回調(diào)時，其實可以獲取到一個參數(shù)：onInvalidate

• 當(dāng)副作用即將重新執(zhí)行 或者 偵聽器被停止 時會執(zhí)行該函數(shù)傳入的回調(diào)函數(shù)；
• 我們可以在傳入的回調(diào)函數(shù)中，執(zhí)行一些清除工作；
  
  

六、setup中使用ref

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

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

七、watchEffect的執(zhí)行時機

默認(rèn)情況下，組件的更新會在副作用函數(shù)執(zhí)行之前：

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

我們會發(fā)現(xiàn)打印結(jié)果打印了兩次：

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

八、調(diào)整watchEffect的執(zhí)行時機

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

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

我們可以設(shè)置副作用函數(shù)的執(zhí)行時機：

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

九、Watch的使用

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

• watch需要偵聽特定的數(shù)據(jù)源，并在回調(diào)函數(shù)中執(zhí)行副作用；
• 默認(rèn)情況下它是惰性的，只有當(dāng)被偵聽的源發(fā)生變化時才會執(zhí)行回調(diào)；

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

• 懶執(zhí)行副作用（第一次不會直接執(zhí)行）；
• 更具體的說明當(dāng)哪些狀態(tài)發(fā)生變化時，觸發(fā)偵聽器的執(zhí)行；
• 訪問偵聽狀態(tài)變化前后的值；

十、偵聽單個數(shù)據(jù)源

watch偵聽函數(shù)的數(shù)據(jù)源有兩種類型：

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

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

十一、偵聽多個數(shù)據(jù)源

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

十二、偵聽響應(yīng)式對象

如果我們希望偵聽一個數(shù)組或者對象，那么可以使用一個getter函數(shù)，并且對可響應(yīng)對象進(jìn)行解構(gòu)：

十三、watch的選項

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

• 也可以傳入 immediate 立即執(zhí)行；
  
  
  
  

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。