uniapp watch如何使用

在uniapp中如何使用watch监听数据变化？我在vue项目中熟悉watch的用法，但在uniapp里尝试监听data中的数据时发现不生效。能否提供一个完整的示例，包括如何在uniapp的页面组件中正确配置和使用watch？另外，uniapp的watch和vue的watch在使用上有什么区别需要注意的吗？

2 回复

在uniapp中，使用watch监听数据变化：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count从${oldVal}变为${newVal}`)
    }
  }
}

也可以监听对象属性：

watch: {
  'obj.name'(newVal) {
    console.log('name变化了', newVal)
  }
}

支持深度监听对象变化：

watch: {
  obj: {
    handler(newVal) {
      console.log('obj变化了')
    },
    deep: true
  }
}

在 UniApp 中使用 watch 监听数据变化，类似于 Vue.js 的响应式机制。以下是具体用法和示例：

基本用法

在页面的 data 中定义需要监听的数据，然后在 watch 对象中设置监听函数。

export default {
  data() {
    return {
      count: 0,
      user: {
        name: 'Alice',
        age: 20
      }
    }
  },
  watch: {
    // 监听基本数据类型
    count(newVal, oldVal) {
      console.log(`count 从 ${oldVal} 变为 ${newVal}`);
    },
    // 监听对象属性（深度监听）
    'user.name': {
      handler(newVal, oldVal) {
        console.log(`用户名从 ${oldVal} 变为 ${newVal}`);
      },
      deep: true // 深度监听对象内部变化
    },
    // 立即触发监听
    'user.age': {
      handler(newVal, oldVal) {
        console.log(`年龄变化为: ${newVal}`);
      },
      immediate: true // 立即执行一次
    }
  },
  methods: {
    changeData() {
      this.count++;
      this.user.name = 'Bob';
    }
  }
}

监听对象整体变化

若需监听整个对象，需启用 deep 选项：

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('用户信息发生变化', newVal);
    },
    deep: true
  }
}

注意事项

  1. 监听数组：直接修改数组元素需用 this.$set 或数组方法（如 push）触发更新。
  2. 性能优化：避免过度使用深度监听，尤其是大型对象。
  3. 卸载监听：页面销毁时自动清理，无需手动处理。

通过以上方式，可灵活响应 UniApp 中数据的变化，实现动态交互逻辑。

回到顶部