Aurelia中利用BindingEngine精确检测属性值变化的教程

import { BindingEngine, Disposable } from 'aurelia-binding';
import { inject } from 'aurelia-framework';

// 使用 @inject 装饰器注入 BindingEngine
@inject(BindingEngine)
export class MyComponent {
  public myValue: number = 0;
  public myText: string = 'Hello';

  private valueObserver: Disposable | null = null;
  private textObserver: Disposable | null = null;

  constructor(private bindingEngine: BindingEngine) {}

  /**
   * attached 生命周期钩子，在组件绑定到DOM时调用。
   * 适合在这里创建属性观察者。
   */
  attached(): void {
    // 监听 myValue 属性的变化
    this.valueObserver = this.bindingEngine
      .propertyObserver(this, 'myValue') // 观察当前实例的 'myValue' 属性
      .subscribe((newValue, oldValue) => {
        console.log(`myValue changed from ${oldValue} to ${newValue}`);
        this.doMagicWithValue(newValue); // 执行自定义逻辑
      });

    // 监听 myText 属性的变化
    this.textObserver = this.bindingEngine
      .propertyObserver(this, 'myText') // 观察当前实例的 'myText' 属性
      .subscribe((newValue, oldValue) => {
        console.log(`myText changed from '${oldValue}' to '${newValue}'`);
        this.doMagicWithText(newValue); // 执行自定义逻辑
      });

    // 可以在这里改变值来测试观察者是否工作
    // setTimeout(() => {
    //   this.myValue = 5;
    //   this.myText = 'World';
    // }, 2000);
  }

  /**
   * detached 生命周期钩子，在组件从DOM解除绑定时调用。
   * 务必在这里清理所有观察者。
   */
  detached(): void {
    // 清理 myValue 的观察者，防止内存泄漏
    if (this.valueObserver) {
      this.valueObserver.dispose();
      this.valueObserver = null;
    }
    // 清理 myText 的观察者
    if (this.textObserver) {
      this.textObserver.dispose();
      this.textObserver = null;
    }
  }

  /**
   * 示例方法：根据 myValue 的变化执行一些自定义逻辑
   * @param value 当前的 myValue
   */
  doMagicWithValue(value: number): void {
    console.log(`执行与 myValue 相关的魔法操作，当前值: ${value}`);
    // 例如：更新UI的某个部分、发送API请求、执行计算等
  }

  /**
   * 示例方法：根据 myText 的变化执行一些自定义逻辑
   * @param text 当前的 myText
   */
  doMagicWithText(text: string): void {
    console.log(`执行与 myText 相关的魔法操作，当前值: ${text}`);
  }

  // 假设有一个方法来改变 myValue，用于测试
  incrementValue(): void {
    this.myValue++;
  }

  // 假设有一个方法来改变 myText，用于测试
  changeText(): void {
    this.myText = this.myText === 'Hello' ? 'World' : 'Hello';
  }
}