vue watch检测，检测对象里某个属性。

最新推荐文章于 2025-05-26 18:13:40 发布

了了1生

最新推荐文章于 2025-05-26 18:13:40 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue watch检测

本文链接：https://blog.youkuaiyun.com/weixin_42460179/article/details/88335355

vue 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js中watch的使用方法，包括如何监听单个属性变化、深度监听对象属性及特定属性变化，通过实例展示了如何在项目中有效利用watch进行数据响应式处理。

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

watch可以让你自定义一个侦听器，监听某个数据或者值，然后根据你改变的值再做出其它的处理操作（如：显示，隐藏，增，删）等

1.检测对象

data () {
    return {
      // 查询表单属性
      serachForm: {
        // 项目id
        projectId: ''
      },
}

2.监听单属性时可以直接监听，而监听是个对象的话，一般会用深度监听。

  // 监测数据
  watch: {
    serachForm: {
      handler (newVal, oldVal) {
        console.log(newVal.projectId)
      },
      deep: true //是否深度监听
    }
  }

3.如果对象里有很多属性的话，我只想监听projectId，这样其他属性发生变化深度监听也会触发。这时可以用引号监听对象中某个属性的变化。

  // 检测serachForm中的projectId
  watch: {
    'serachForm.projectId': function (newVal, oldVal) {
      console.info(newVal)
    }
  }