私域电商软件及相关增值服务提供商    

免费试用
微信小程序开发数据监听器
作者: --时间: 2025-07-20 23:30:30 阅读量:

微信小程序数据监听器可以用于监听和响应任何属性和数据字段的变化,是在小程序基础库版本2.6.1以后开始支持的。下面介绍如何使用数据监听器。

1. 使用数据监听器

当一些数据字段被setData设置时,需要执行一些操作。例如,this.data.sum永远是this.data.numberA与this.data.numberB的和。此时,可以使用数据监听器进行实现。使用示例如下:

<Component>{
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时,执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
}</Component>

2. 监听字段语法

数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次setData最多触发每个监听器一次。同时,监听器可以监听子数据字段。示例如下:

<Component>{
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // (除此以外,使用 setData 设置 this.data.some 也会触发)
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // (除此以外,使用 setData 设置 this.data.arr 也会触发)
      arr12 === this.data.arr[12]
    },
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // (除此以外,使用 setData 设置 this.data.some 也会触发)
      field === this.data.some.field
    },
    '**': function() {
      // 每次 setData 都触发
    },
  },
}

如果需要监听所有子数据字段的变化,可以使用通配符**。特别地,仅使用通配符**可以同时监听全部setData操作。

提示:数据监听器监听的是setData涉及到的数据字段,即使这些数据字段的值没有发生变化,数据监听器依然会被触发。如果在数据监听器函数中使用setData设置本身监听的数据字段,可能会导致死循环,需要特别留意。数据监听器和属性的observer相比,数据监听器更强大且通常具有更好的性能。

一套系统全搞定
  • 商家管理
  • 商品管理
  • 订单管理
  • 会员管理
  • 营销中心
  • 供应链入驻
  • 财务管理
  • 支付分账
  • 商城直播
免费试用
更多产品任你选
B2B2C多用户商城系统

类天猫&京东模式系统

了解更多
B2B2B电商交易系统

全渠道订货/采购及经销商管
理数字化系统

了解更多
S2B2B电商交易系统

上下游资源整合数字化解决方

了解更多
企业集采商城系统

中大型企业数字化采购与交易
系统

了解更多
员工福利商城系统

集福利管理、发放于一体的员
工福利商城

了解更多

电话咨询 微信咨询 0元开店