微信小程序数据监听器

港控/mmm° 2021-09-08 20:20 485阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

数据监听器可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 [2.6.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
          })
        }
      }
    })

[在开发者工具中预览效果][Link 1]

**监听字段语法**

数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 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 相比，数据监听器更强大且通常具有更好的性能。

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[2.6.1]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/s/FUZF9ams7g6N