业务实现：vue2延迟监听_vue watch延迟-优快云博客

本文链接：https://blog.youkuaiyun.com/zhazhali_fenqi/article/details/129682613

文章讨论了在实现业务功能时遇到的表单数据同步问题，通过深拷贝（序列化和反序列化）解决了原始数据与绑定变量同步的问题，但指出这种方法效率较低。作者还尝试使用监听方法，但在初始渲染时监听到三次未预期的变化。为解决这个问题，提出了延迟监听的策略，等待1秒后开始监听以确保完全渲染完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现一个业务功能的时候，当时有一个问题，就是我的保存原始数据的变量后面跟绑定的变量一直是一样的，也就是说他会随着原始数据的变化而变化。很显然是深拷贝问题，用序列化反序列化的方法进行了深拷贝解决这个问题，这种深拷贝效率是有点低的，有兴趣的可以自己写递归。

 this.prevForm = JSON.stringify(this.ruleForm)
   if (JSON.stringify(form) !== this.prevForm) {
        flag = false
      }

由此已经实现表单内容更新时候的比较。

在这个过程中，我也尝试了监听的方法，如果使用监听我们不用序列化，也不用遍历比较每一个表单内容，只需要监听对象值是否改变，然后把更新按钮禁用或者使用就行。
问题是，在初始渲染的时候会有三次监听到改变，也就是我们并没有操作表单，在初始渲染的时候就会有三次表单值的改变被监听到，那么按钮就会从禁用转变为可以使用，但是这种时候我们并没有操作表单。
所以就想到了设置延迟监听的方法，在1s之后等完全渲染完成再开始设置监听。

watch: {
  // watch监听 判断是否修改
  'ruleForm': async function(newVal) {
    // 执行方法
    var delay = 2000
    this.lastTime = (new Date()).valueOf()
    await this.sleep(delay)
    var nowTime = (new Date()).valueOf()
    var gap = nowTime - this.lastTime
    if (gap < delay) {
      return
    }

    console.log(newVal)
    this.updateId = false
    console.log(this.updateId)
},
在methods方法里面写：
sleep(ms = 1000) {
  return new Promise((resolve) => setTimeout(resolve, ms))
},