「Vue表單自動保存功能」踩坑

☝️前幾天接到一個產品需求說要我給移動端的表單加上自動保存的功能，在開發自動保存功能的過程當中仍是發現了有一些知識點能夠值得記錄分享的，分享以下：

1.  爲何vue 深度監聽新老對象的值會同樣?
2. 咱們該採用什麼方式去優化自動保存?
3. 完整代碼
4. Gif演示效果

爲何vue深度監聽新老對象的值會同樣

當我在認真寫watch監聽表單的代碼時，發現新老值竟然是同樣，以下代碼所示：

因而我去官方找了找緣由，vue官方果然有給出解釋：

cn.vuejs.org/v2/api/# 實例方式-數據

因此接下來的問題就變成了如何解決watch 新老值同樣的問題。

我在google裏找到了答案，解決方案以下：

咱們該採用什麼方式去優化自動保存？

爲了不每次watch值的時候都去發起請求，咱們得考慮去優化api接口的請求頻次，這裏採用防抖方案是最佳了。

watch裏寫防抖須要注意了，debounce不能寫在watch函數內部，由於debounce傳入函數內部this指向 的 不是當前vue實例。

代碼以下：

正確寫法，代碼以下：

完整代碼

Gif演示效果