? ?戳藍字「前端技術優選」關注我們哦！

作者：yeyan1996

https://juejin.im/post/6892577964458770445

應某人的要求被迫營業，望各位看官不要吝嗇手中的贊-。-

背景

在使用 uni-app 開發小程序時，有個填寫表單的需求，包含兩個輸入框，看起來像這樣

兩個在普通不過的輸入框

因為需要復用一些樣式和邏輯，所以將輸入框抽象成了組件，代碼簡化后如下

子組件代碼

由于在父組件中需要依賴輸入的值請求接口，為避免接口頻繁調用，這邊引入 lodash?debounce?用于防抖

這個需求在 yeyan1996 眼中沒有任何難度，但在幾天后卻收到了部分用戶反饋，說在兩個輸入框分別填寫了值，但最終只有一個輸入框有效

這時才回頭想起代碼中的 debounce ....

問題原因

收到用戶反饋后，yeyan1996 嘗試多次點擊輸入框，發現問題并不是必現，最終總結出了規律

填寫第一個輸入框后，快速對第二個輸入框進行輸入，才會造成最終的表單數據中只有一個值的問題

通過下圖子組件的 log 可以看到，雖然 ui 界面顯示兩個輸入框都有值，但實際只觸發了第二個輸入框的 log

之所以 ui 界面顯示兩個輸入框都有值，是因為是用戶直接和 textarea 控件交互，實際并沒有更新控件綁定的 value 值

最終結論：第一個輸入框中被 debounce 包裹的函數并沒有執行

是防抖問題么？

嘗試將 debounce 去掉后，果然 bug 解決了

那么，是防抖的問題么？

不妨先思考下 Vue 組件的實現原理，我在?[Vue.js進階]從源碼角度剖析Vue的生命周期?中提到過，每個 .vue 文件可以理解為一個構造函數，或者一個 Class，而在父組件中引用組件就等于對其的實例化

上述代碼即創建了 2 個 CustomTextarea 組件的實例

熟悉面向對象的同學應該知道，構造函數實例化時，同時會創建實例的屬性和方法，一般每個實例的屬性都不相同，而方法因為是函數，所以會復用，已達到節省內存的效果

class?Person?{
??constructor(name)?{
????this.name?=?name
??}
??eat()?{}
}

const?person1?=?new?Person('張三')
const?person2?=?new?Person('李四')

console.log(person1.name?===?person2.name)?//?false
console.log(person1.eat?===?person2.eat)?//?true

Vue2 ?的組件借鑒了面向對象的原理，雖然內部的實現方式不同，但最終的行為一致，即組件的每個實例都擁有不同的 data，但會復用相同的 methods

源碼地址：https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L286

286 行中 methods 對象是每個組件實例共用的，每實例化一個組件，會創建相同的引用，指向 methods 中的函數

上圖案例中， 所有 custom-textarea 中的 handleInput 都指向同一個函數，而作為 props 的 value 字段是通過父組件傳入的，并不會共享(分別為 text1/text2)

解決方案

經過上述的分析，答案顯而易見，兩個組件實例都指向了同一個被 debounce 包裹的 handleInput 函數

所以在輸入第一個值后， 1000 毫秒內快速切換到第二個輸入框進行輸入，此時由于防抖效果仍存在，導致第一次的輸入并沒有計算在內

而第二次輸入完畢后，經過 1000 毫秒，最終只會執行第二個 custom-textarea 的 handleInput

只要使得每個組件實例的 handleInput 互相獨立，即可解決問題

將 handleInput 從 methods 放到 data 中，每次初始化時創建防抖函數，此時每個組件實例的 handleInput 就不會互相干擾

大功告成???

題外話

Vue 組件中通過將 data 定義為一個函數，函數的返回值作為組件的數據來源，使得每個組件實例的數據都不相同

而 Vue 組件中 methods 是所有實例共用的，那么對于 watch/computed/生命周期，它們是否會共用的呢？

和 methods 對象相同，computed 對象的屬性名是一個響應式變量，而值是一個函數，所以所有實例也會指向同一個函數，但由于這個函數需要有返回值，所以不會用防抖函數進行包裹，很少遇到函數公用導致的問題

而 watch 也和 methods 對象相同，所有組件實例共用，所以也會存在防抖的問題

至于生命周期本身就是一個函數，如果對生命周期設置了防抖，多個組件實例同時初始化時也會造成只執行一次的情況

參考資料

[Vue.js進階]從源碼角度剖析Vue的生命周期

【Vue原理】Methods - 源碼版](https://segmentfault.com/a/1190000019605909)

在看點這里