【Vue前端开发中，使用`Watch`来监听对象】

用户1750537

发布于 2025-08-29 17:34:39

5000

代码可运行

运行总次数：0

代码可运行

在Vue前端开发中，可以使用Watch来监听对象的变化，然后进行对象值的比对。

例如，假设有一个Vue组件的data中有一个对象userInfo，我们希望在userInfo发生变化时进行比对，可以这样做：

data() {
  return {
    userInfo: {
      name: 'John',
      age: 20
    }
  }
},
watch: {
  userInfo: {
    handler(newVal, oldVal) {
      // 比对对象值
      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
        console.log('userInfo发生变化');
      }
    },
    deep: true // 开启深度观察，监听对象内部属性的变化
  }
}

在上述代码中，通过为userInfo对象设置一个watch监视器，当userInfo发生变化时，会执行handler函数，通过比对新旧userInfo对象的字符串表示，判断是否发生了变化。当然，这只适用于浅比较，如果对象内部嵌套了更深层次的属性，可以通过设置deep: true来开启深度观察，监听对象内部属性的变化。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-08-28，如有侵权请联系 cloudcommunity@tencent.com 删除

字符串