前端開發(fā)中經(jīng)常需要寫的一個(gè)邏輯：在提交后將表單數(shù)據(jù)重置為默認(rèn)值。
原本我使用一個(gè)很笨的寫法：
預(yù)先復(fù)制一份對象（這里甚至不太嚴(yán)謹(jǐn)，沒有做深拷貝），然后在需要重置的時(shí)候?qū)⑵渲匦沦x值給源對象。
這就導(dǎo)致得在每個(gè)頁面無休無止地重復(fù)寫 dataCopy 和 reset。
直到最近，我看到了 如何重置vue組件的狀態(tài)——遠(yuǎn)方os，大佬的寫法非常優(yōu)雅。
因?yàn)檫@個(gè)邏輯經(jīng)常要復(fù)用，于是選擇封裝進(jìn)了 Vue3 的組合式函數(shù)(composables)中。
使用 useResettableRef，傳入兩個(gè)參數(shù)：
value：需要可重置化的對象；
clone：克隆對象的回調(diào)函數(shù)（這里我默認(rèn)用了自己的 defaultClone，也可以更嚴(yán)謹(jǐn)使用例如 Lodash 的 _cloneDeep）
然后返回一個(gè) ref 對象和將其重置為默認(rèn)值的 reset 方法。
代碼很簡單，但我就是想不到。有時(shí)候限制代碼水平的不是思維邏輯，而是對抽象的敏感程度。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
暫無評(píng)論，快來評(píng)論吧!