微信小程序 - 监听page中的data

最新推荐文章于 2025-07-02 09:24:55 发布

csu_zipple

最新推荐文章于 2025-07-02 09:24:55 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/csu_passer/article/details/88395240

微信小程序专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种在app.js中实现数据监听的方法，通过observe和watch函数动态跟踪特定data对象属性的变化，并在属性值改变时触发回调函数。示例展示了如何在页面加载时设置监听，并在属性更新时执行自定义函数。

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

在app.js中

  observe(obj, key, fun, caller){
    var val = obj[key];
    Object.defineProperty(obj, key, {
      configurable: true,
      enumerable: true,
      set(value) {
        console.log('set ',key)
        val = value;
        fun.call(caller, value, val)
      },
      get() {
        return val;
      }
    })
  },

 // 监听特定data对象的属性变化
 // caller :保留this指针
  watch(data, watch, caller){
    Object.keys(watch).forEach(v => {
      this.observe(data, v, watch[v], caller);
    })

  }

使用的方法很简单：
在相应的页面获取app实例，然后在onLoad中：

 app.watch(this.data, this.watch, this);

再在page的options中添加字段：

  watch: {
    keyword(val, old) {
      if (val !== '') {
        console.log('watching')
        throttle(this.onInputSearch, null, [val])
      }
    }
  },