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

使用数据监听器

有时，在一些数据字段被 setData 设置时，需要执行一些操作。

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

  1. Component({
  2.   attached() {
  3.     this.setData({
  4.       numberA: 1,
  5.       numberB: 2,
  6.     })
  7.   },
  8.   observers: {
  9.     'numberA, numberB': function (numberA, numberB) {
  10.       // 在 numberA 或者 numberB 被设置时，执行这个函数
  11.       this.setData({
  12.         sum: numberA + numberB
  13.       })
  14.     }
  15.   }
  16. })

在开发者工具中预览效果

监听字段语法

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 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.   attached() {
  10.     // 这样会触发上面的 observer
  11.     this.setData({
  12.       'some.field': { /* ... */ }
  13.     })
  14.     // 这样也会触发上面的 observer
  15.     this.setData({
  16.       'some.field.xxx': { /* ... */ }
  17.     })
  18.     // 这样还是会触发上面的 observer
  19.     this.setData({
  20.       some: { /* ... */ }
  21.     })
  22.   }
  23. })

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

  1. Component({
  2.   observers: {
  3.     '**': function () {
  4.       // 每次 setData 都触发
  5.     },
  6.   },
  7. })

Bugs & Tips:

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

原文:

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/observer.html