Javascript

Vue表单自动保存功能

本文主要是介绍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演示



这篇关于Vue表单自动保存功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航