小程序 监听机制

目录

一、使用数据监听器

二、监听字段语法

 


一、使用数据监听器

有时,在一些数据字段被 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
      })
    }
  }
})

 


二、监听字段语法

数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 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]
    },
  }
})

如果需要监听所有子数据字段的变化,可以使用通配符 ** 。

Component({
  observers: {
    'some.field.**': function(field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // (除此以外,使用 setData 设置 this.data.some 也会触发)
      field === this.data.some.field
    },
  },
  attached: function() {
    // 这样会触发上面的 observer
    this.setData({
      'some.field': { /* ... */ }
    })
    // 这样也会触发上面的 observer
    this.setData({
      'some.field.xxx': { /* ... */ }
    })
    // 这样还是会触发上面的 observer
    this.setData({
      'some': { /* ... */ }
    })
  }
})

特别地,仅使用通配符 ** 可以监听全部 setData 。

Component({
  observers: {
    '**': function() {
      // 每次 setData 都触发
    },
  },
})

Bugs & Tips:

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

 

拓展:

小程序也能像vue那样使用watch | computed来实时监听数据的变化了(只需要一个插件):

详情请戳这里:https://blog.csdn.net/mChales_Liu/article/details/101349448

 

 

 

 

 

 

 

 

在微信小程序中,如果需要监听公共 js 中的数据变化,可以使用事件通知机制来实现。 具体步骤如下: 1. 在公共 js 中定义需要监听的数据,并导出一个事件触发函数: ```js // common.js let data = { count: 0 } const notifyCountChanged = () => { const eventChannel = getApp().globalData.eventChannel eventChannel.emit('countChanged', data.count) } const increaseCount = () => { data.count++ notifyCountChanged() } module.exports = { data, increaseCount } ``` 2. 在 `App` 中定义一个全局事件通道: ```js // app.js App({ globalData: { eventChannel: new EventEmitter() } }) ``` 3. 在需要监听公共 js 中数据变化的页面中,监听事件通道的 `countChanged` 事件: ```js // page.js const common = require('../../common.js') const eventChannel = getApp().globalData.eventChannel Page({ data: { count: common.data.count }, onLoad: function () { eventChannel.on('countChanged', (count) => { console.log('countChanged', count) this.setData({ count: count }) }) } }) ``` 在 `onLoad` 生命周期函数中,使用 `eventChannel.on()` 方法监听 `countChanged` 事件,并在回调函数中更新页面中的数据。 当公共 js 中的数据变化时,调用 `notifyCountChanged()` 函数触发 `countChanged` 事件,从而通知所有监听该事件的页面更新数据。 需要注意的是,使用事件通知机制监听公共 js 中的数据变化,会带来一定的性能开销,因此建议只在必要的情况下使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值