「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演示效果