「Vue表单自动保存功能」踩坑

7,660 阅读1分钟

☝️前几天接到一个产品需求说要我给移动端的表单加上自动保存的功能,在开发自动保存功能的过程中还是发现了有一些知识点可以值得记录分享的,分享如下:

  1.  为什么vue 深度监听新老对象的值会一样?
  2. 我们该采用什么方式去优化自动保存?
  3. 完整代码
  4. Gif演示效果

为什么vue深度监听新老对象的值会一样

当我在认真写watch监听表单的代码时,发现新老值居然是一样,如下代码所示:



于是我去官方找了找原因,vue官方果真有给出解释:

所以接下来的问题就变成了如何解决watch 新老值一样的问题。

我在google里找到了答案,解决方案如下:



我们该采用什么方式去优化自动保存?

为了避免每次watch值的时候都去发起请求,我们得考虑去优化api接口的请求频次,这里采用防抖方案是最佳了。

watch里写防抖需要注意了,debounce不能写在watch函数内部,因为debounce传入函数内部this指向不是当前vue实例。

代码如下:



正确写法,代码如下:

完整代码


Gif演示效果