vue 深度watch与watch立即触发回调

阳光穿透心脏的1/2处 2023-02-21 06:27 16阅读 0赞

#### 基础用法 ####

搜索框输入搜索关键字的时候，可以自动触发搜索,此时除了监听搜索框的`change`事件之外，我们也可以通过`watch`监听搜索关键字的变化。

<template>
      <div>
         <span>搜索</span>
         <input v-model="searchVal" />
      </div>
    </template>
    <script>
    export default { 
      data() { 
        return { 
          searchVal: ''
        }
      },
      watch: { 
        // 在值发生变化之后，重新加载数据
        searchVal(newValue, oldValue) { 
          if (newValue !== oldValue) { 
            this.loadData()
          }
        }
      },
      methods: { 
        loadData() { 
          // 重新加载数据，此处需要通过函数防抖
        }
      }
    }
    </script>

#### 立即触发 ####

通过上面的代码，现在已经可以在值发生变化的时候触发加载数据了，但是如果要在页面初始化时候加载数据，我们还需要在`created`或者`mounted`生命周期钩子里面再次调用`loadData`方法。不过，现在可以不用这样写了，通过配置`watch`的立即触发属性，就可以满足了。

export default { 
      watch: { 
        // 在值发生变化之后，重新加载数据
        searchValue: { 
        // 通过handler来监听属性变化, 初次调用 newValue为""空字符串， oldValue为 undefined
          handler(newValue, oldValue) { 
            if (newValue !== oldValue) { 
              this.loadData()
            }
          },
          // 配置立即执行属性
          immediate: true
        }
      }
    }

#### 深度监听 ####

一个表单页面，需求希望用户在修改表单的任意一项之后，表单页面就需要变更为被修改状态。如果按照上例中`watch`的写法，那么我们就需要去监听表单每一个属性，太麻烦了，这时候就需要用到`watch`的深度监听`deep`

export default { 
      data() { 
        return { 
          formData: { 
            name: '',
            sex: '',
            age: 0,
            deptId: ''
          }
        }
      },
      watch: { 
        // 在值发生变化之后，重新加载数据
        formData: { 
          // 需要注意，因为对象引用的原因， newValue和oldValue的值一直相等
          handler(newValue, oldValue) { 
            // 在这里标记页面编辑状态
          },
          // 通过指定deep属性为true, watch会监听对象里面每一个值的变化
          deep: true
        }
      }
    }

#### 随时监听，随时取消，了解一下$watch ####

有这样一个需求，有一个表单，在编辑的时候需要监听表单的变化，如果发生变化则保存按钮启用，否则保存按钮禁用。这时候对于新增表单来说，可以直接通过`watch`去监听表单数据(假设是`formData)`,如上例所述，但对于编辑表单来说，表单需要回填数据，这时候会修改`formData`的值，会触发`watch`,无法准确的判断是否启用保存按钮。现在你就需要了解一下`$watch`

export default { 
      data() { 
        return { 
          formData: { 
            name: '',
            age: 0
          }
        }
      },
      created() { 
        this.$_loadData()
      },
      methods: { 
        // 模拟异步请求数据
        $_loadData() { 
          setTimeout(() => { 
            // 先赋值
            this.formData = { 
              name: '子君',
              age: 18
            }
            // 等表单数据回填之后，监听数据是否发生变化
            const unwatch = this.$watch(
              'formData',
              () => { 
                console.log('数据发生了变化')
              },
              { 
                deep: true
              }
            )
            // 模拟数据发生了变化
            setTimeout(() => { 
              this.formData.name = '张三'
            }, 1000)
          }, 1000)
        }
      }
    }

根据上例可以看到，我们可以在需要的时候通过`this.$watch`来监听数据变化。那么如何取消监听呢，上例中`this.$watch`返回了一个值`unwatch`,是一个函数，在需要取消的时候，执行 `unwatch()`即可取消

[你可能不知道的一些Vue实战技巧][Vue]

[Vue]: https://mp.weixin.qq.com/s?__biz=MzIyMDkwODczNw==&mid=2247487902&idx=1&sn=9ab3d1400b0452717e32300da10de774&chksm=97c58c30a0b205262c6ac60b02a670cd55d951a169cd8a2e7f6301ea83c1f7615ff0d7c528fc&scene=126&sessionid=1593398996&key=49fcf8b7194fd4338ab9955fa9a52171daddfd0c91df770e233b653b92cb3f391a69b3cba40e7a2907ec43e099b870d9aa56feaaee9fa12a1b9737b5c45b1db9432f33ed54731e070cf4b98abd9e2c51&ascene=1&uin=Njk2NzgwMDYx&devicetype=Windows%2010%20x64&version=62090072&lang=zh_CN&exportkey=AUlySOw67r63KTm0y3o4LmU=&pass_ticket=fCWWDhz43nrRAfOtswcpPBX2W/jCtKyeVjBYScwlY/93P8qtXo3hBxDI/rj10cDW