vue中watch监听对象中某个属性值/深度监听/监听data中的值变化

最新推荐文章于 2025-03-24 08:56:04 发布

初心-LIUSHOP

最新推荐文章于 2025-03-24 08:56:04 发布

阅读量671

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42817227/article/details/127627720

版权

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍Vue.js中data属性的监听方法，包括字符串和对象属性的监听。通过使用watch选项，开发者可以设置新旧值处理器，并开启深度及首次监听。

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

data () {
  return {
    str: '',
    obj: {
      key1: '',
      key2: ''
    }
  }
},

watch: {
  // 监听某个值变化
  'str': {
    handler (新值，旧值) {
      // 逻辑处理
    },
    deep: true, // 深度监听
    immediate: true // 首次是否执行，默认不会执行
  },
  // 监听对象中某个属性
  'obj.key1': {
    handler (新值，旧值) {
      // 逻辑处理
    },
    deep: true,
    immediate: true
  },