背景

最近在做一個需求的時候，用到了一個 Vue3 內(nèi)置的 API，發(fā)現(xiàn)真的非常實用，分享給大家。

需求是這樣的，我有一個變量 sum，是通過computed去計算的，且 sum 依賴的變量有的是響應式的，有的不是響應式的，所以會造成以下的后果，當非響應式變量改變時，并不會觸發(fā)sum 的響應式更新，只有響應式變量改變時才會觸發(fā)sum的響應式更新。

圖片

所以我需要用到一個 Vue3 的內(nèi)置 API，它就是customRef。

customRef

創(chuàng)建一個自定義的 ref，顯式聲明對其依賴追蹤和更新觸發(fā)的控制方式。

類型

圖片

詳細信息

customRef() 預期接收一個工廠函數(shù)作為參數(shù)，這個工廠函數(shù)接受 track 和 trigger 兩個函數(shù)作為參數(shù)，并返回一個帶有 get 和 set 方法的對象。

一般來說，track() 應該在 get() 方法中調(diào)用，而 trigger() 應該在 set() 中調(diào)用。然而事實上，你對何時調(diào)用、是否應該調(diào)用他們有完全的控制權(quán)。

實踐小案例：防抖 Ref

創(chuàng)建一個防抖 ref，即只在最近一次 set 調(diào)用后的一段固定間隔后再調(diào)用：

圖片

在組件中使用：

圖片

可控的 computed

圖片

再回到一開始的話題，我遇到的問題是：當非響應式變量改變時，并不會觸發(fā)sum 的響應式更新，只有響應式變量改變時才會觸發(fā)sum的響應式更新。

所以我們需要當非響應式變量count1、count2改變的時候，去手動觸發(fā) computed 的計算，這樣才能更新 sum，但是 computed 返回的不是一個函數(shù)啊，我們要怎么去手動觸發(fā)計算呢？

所以這時候就需要一個可控的 computed，它擁有以下功能：

• 1、能根據(jù)響應式變量去自動觸發(fā)計算更新
• 2、提供一個方法讓用戶手動去調(diào)用觸發(fā)更新

期望使用方式是這樣的：

圖片

具體的代碼實現(xiàn)如下：

圖片