☝️ a few days ago, I received a product demand to add automatic saving function to mobile terminal forms. In the process of developing automatic saving function, I still found some knowledge points worth recording and sharing, which are shared as follows:

  1. Why does vUE deep listen on new and old objects have the same value?
  2. How can we optimize autosave?
  3. The complete code
  4. Gif demo effect

Why does vUE deep listen on new and old objects have the same value

When I was writing the code of watch listening form carefully, I found that the new and old values were actually the same, as shown in the following code:





So I went to the official to find the reason, vUE official did give an explanation:

cn.vuejs.org/v2/api/#
Instance mode – Data

So the next problem becomes how to solve the problem that the old value of Watch is the same as the new value.

I found the answer on Google, and here’s the solution:





How can we optimize autosave?

In order to avoid making requests every time the watch value is set, we need to consider optimizing the request frequency of the API interface. Here, anti-shake scheme is the best.

Note that “debounce” cannot be written inside the watch function because “debounce” is passed to the function “this”
the
Not the current VUE instance.

The code is as follows:





To write this correctly, the code is as follows:

The complete code



Gif demo effect