数据监听器

数据监听器可以用于监听和响应任何属性和数据字段的变化。数据监听器自小程序基础库版本 3.105.9 开始支持。

使用数据监听器

有时,需要组合监听一些数据字段。

例如,this.data.sum永远是 this.data.numberAthis.data.numberB的和。此时,可以使用数据监听器进行如下实现。

代码示例

在开发者工具中预览效果

  • JS
  1. Component({
  2. properties: {
  3. numberA: {
  4. type: Number,
  5. value: 0
  6. },
  7. numberB: {
  8. type: Number,
  9. value: 0
  10. }
  11. },
  12. attached: function() {
  13. this.setData({
  14. numberA: 1,
  15. numberB: 2
  16. })
  17. },
  18. observers: {
  19. 'numberA, numberB': function (numberA, numberB) {
  20. // 在 numberA 或者 numberB 被设置时,执行这个函数
  21. this.setData({
  22. sum: numberA + numberB
  23. })
  24. }
  25. }
  26. });

监听字段语法

数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次setData最多触发每个监听器一次。

同时,监听器可以监听子数据字段,如下例所示。

代码示例

  • JS
  1. Component({
  2. observers: {
  3. 'some.subfield': function(subfield) {
  4. // 使用 setData 设置 this.data.some.subfield 时触发
  5. // (除此以外,使用 setData 设置 this.data.some 也会触发)
  6. subfield === this.data.some.subfield
  7. },
  8. 'arr[12]': function(arr12) {
  9. // 使用 setData 设置 this.data.arr[12] 时触发
  10. // (除此以外,使用 setData 设置 this.data.arr 也会触发)
  11. arr12 === this.data.arr[12]
  12. },
  13. }
  14. });

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

  • JS
  1. Component({
  2. observers: {
  3. 'some.field.**': function(field) {
  4. // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
  5. // (除此以外,使用 setData 设置 this.data.some 也会触发)
  6. field === this.data.some.field
  7. },
  8. },
  9. data: {
  10. some: {
  11. field: {
  12. subfield: [1, 2, 3]
  13. }
  14. }
  15. },
  16. attached: function() {
  17. // 会触发 observers
  18. this.setData({
  19. 'some.field': {}
  20. });
  21. // 会触发 observers
  22. // this.setData({
  23. // 'some.field.xxx': {}
  24. // });
  25. // 会触发 observers
  26. // this.setData({
  27. // 'some': {}
  28. // });
  29. }
  30. });

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

  • JS
  1. Component({
  2. observers: {
  3. '**': function(value) {
  4. // 数据发生变化即触发,这里的 value 是 properties 和 data 的合集
  5. }
  6. }
  7. })

Bugs & Tips

  • 数据监听器监听的是setData中涉及的数据字段,并且只有这些字段发生改变时才会触发,类似observer;
  • 在数据监听器中再次进行setData设置被监听的字段,可能会造成循环监听,请注意使用;
  • 由于小程序对setData进行了优化操作,所以如果同步的多次设置setData那么实际上只会执行最后一次setData引起的observers

代码示例

  • JS
  1. Component({
  2. properties: {
  3. numberA: {
  4. type: Number,
  5. value: 0
  6. },
  7. numberB: {
  8. type: Number,
  9. value: 0
  10. }
  11. },
  12. attached: function() {
  13. this.setData({
  14. numberA: 1,
  15. numberB: 2
  16. });
  17. this.setData({
  18. numberA: 2,
  19. numberB: 3
  20. })
  21. },
  22. observers: {
  23. 'numberA, numberB': function (numberA, numberB) {
  24. // 在 numberA 或者 numberB 被设置时,执行这个函数
  25. this.setData({
  26. sum: numberA + numberB
  27. })
  28. }
  29. }
  30. });

以上只会执行一次observers