Vue3 新玩法！我能操控計算內容 Computed！

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助100+名同學完成改造！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

背景

最近在做一個需求的時候，用到了一個 Vue3 內建的 API，發現真的非常實用，分享給大家

需求是這樣的，我有一個變量 sum ，是透過 computed 去計算的，且 sum 依賴的變量有的是響應式的，有的不是響應式的，所以會造成以下的後果，當非響應式變量改變時，並不會觸發 sum 的響應式更新，只有響應式變量改變時才會觸發 sum 的響應式更新

所以我需要用到一個 Vue3 的內建 API，它就是 customRef

customRef

建立一個自訂的 ref，顯式聲明對其依賴追蹤和更新觸發的控制方式。

型別

詳細資訊

customRef() 預期接收一個工廠函式作為參數，這個工廠函式接受 track 和 trigger 兩個函式作為參數，並返回一個帶有 get 和 set 方法的物件。

一般來說， track() 應該在 get() 方法中呼叫，而 trigger() 應該在 set() 中呼叫。然而事實上，你對何時呼叫、是否應該呼叫他們有完全的控制權。

實踐小案例：防抖 Ref

建立一個防抖 ref，即只在最近一次 set 呼叫後的一段固定間隔後再呼叫：

在元件中使用：

可控的 computed

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

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

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

期望使用方式是這樣的：

具體的程式碼實作如下：

結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~