title: 数据监听器 header: develop nav: framework

sidebar: custom-component_observers

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

使用数据监听器

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

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

代码示例

在开发者工具中预览效果

  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最多触发每个监听器一次。

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

代码示例

  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. });

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

  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.         });
  22.         // 会触发 observers
  23.         // this.setData({
  24.         //     'some.field.xxx': {}
  25.         // });
  27.         // 会触发 observers
  28.         // this.setData({
  29.         //     'some': {}
  30.         // });
  31.     }
  32. });

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

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

Bugs & Tips:

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

代码示例

  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。