高级指南：剖析计算属性与侦听器的差异

2024-01-03 21:32:30

在 Angular 框架中，计算属性和侦听器是两种用来响应数据变化的技术。它们都可以让组件在数据发生改变时做出响应，但它们的工作方式却有所不同。

计算属性

计算属性是一种特殊的类成员，它允许您根据其他类成员的值计算出一个新的值。计算属性的语法很简单，就是一个带有 get 的方法，如下所示：

class MyClass {
  private _name: string;

  get fullName(): string {
    return this._name + ' ' + this._lastName;
  }
}

在这个例子中，fullName 计算属性根据 _name 和 _lastName 两个类成员的值计算出一个新的值。当 _name 或 _lastName 的值发生改变时，fullName 计算属性的值也会自动更新。

侦听器

侦听器是一种事件处理程序，当某个事件发生时，它会自动执行。在 Angular 中，侦听器通常用来响应组件属性或事件的变化。侦听器的语法也很简单，就是一个带有 @ 关键字的方法，如下所示：

class MyClass {
  @Input() name: string;

  @Output() nameChange = new EventEmitter<string>();

  ngOnChanges(changes: SimpleChanges) {
    if (changes['name']) {
      this.nameChange.emit(changes['name'].currentValue);
    }
  }
}

在这个例子中，ngOnChanges 方法是一个生命周期钩子，它会在组件的属性发生改变时自动执行。在 ngOnChanges 方法中，我们使用 changes 参数来获取发生改变的属性及其新的值。然后，我们使用 nameChange 事件发射器来发出一个事件，通知其他组件或指令，name 属性已经发生了改变。

计算属性与侦听器的区别

计算属性和侦听器都是用来响应数据变化的技术，但它们的工作方式却有所不同。计算属性是通过计算其他类成员的值来获得一个新的值，而侦听器是通过响应事件来执行某个操作。

计算属性的优点是，它可以让你在类中定义一些只读属性，这些属性的值会根据其他类成员的值自动更新。这可以让你在代码中以一种更简洁、更易读的方式访问这些属性。

侦听器的优点是，它可以让你在组件的属性或事件发生改变时执行某个操作。这可以让你在组件中实现更复杂的逻辑，比如数据验证、表单提交等。

如何选择使用计算属性还是侦听器

在选择使用计算属性还是侦听器时，你需要考虑以下几点：