小程序数据监听器

1. 概述

数据监听器用于实时响应数据变化。自小程序基础库版本 2.6.1 起，这项功能变得更灵活，可用于需要实时更新UI的场景。

2. 使用场景

数据监听器适用于以下几种场景：

• 计算衍生数据：当某些数据字段相互依赖时，可以自动计算和更新相关字段；
• 状态管理：在复杂组件中，通过监听状态变化来管理组件的不同状态；
• 响应用户输入：在用户输入或交互后，动态更新显示内容或计算结果。

2.1 示例

以下是使用数据监听器自动计算和更新 sum 字段：

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    });
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 当 numberA 或 numberB 被设置时，自动更新 sum
      this.setData({
        sum: numberA + numberB
      });
    }
  }
});

3. 监听字段语法

3.1 直接监听多个属性

数据监听器支持同时监听多个属性的变化。

3.2 子数据字段监听

数据监听器不仅可以监听顶层字段，还可以监听嵌套的子字段。例如：

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]
    },
  }
})

3.3 通配符监听

使用 ** 通配符，可以监听所有子数据字段的变化：

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': { /* ... */ }
    })
  }
})

3.4 全局监听

使用 ** 可以监听所有 setData 操作：

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

4. 注意事项

• 触发机制：数据监听器在相关字段变化时被触发，即使值未变化，可能导致性能开销。

• 死循环风险：在监听器中调用 setData 修改自身字段可能会导致无限循环。

• 性能优势：与传统属性的 observer 相比，数据监听器在处理复杂数据时通常表现更好，可以减少不必要的渲染。

• 调试技巧：使用 console.log 语句可以帮助调试监听器的触发和数据变化。

5. 总结

数据监听器能够提高数据管理的灵活性和组件的响应速度。通过合理使用，开发者可以简化代码逻辑，提升开发效率和用户体验。