Angular 2 个模板方法与 getter

Question

我想知道这样做是否有任何好处：

  <div>{{getSomething()}}</div>

  export class MyComp {
    getSomething() { return ...}
  }

关于这个：

 <div>{{getSomething}}</div>

 export class MyComp {
   get getSomething() { return ...}
 }

使用方法与 getter 来显示计算数据。

Answer 1

不同之处在于第一种情况下您在表达式中使用函数，而第二种情况下它不是函数。所以你不能使用

<div>{{getSomething()}}</div>

export class MyComp {
  get getSomething() { return ...}
}

使用第二种方法的好处是在class中使用属性的封装，你需要在class之外访问它。

getter 和 setter 是 ES5 规范的一部分。您可以阅读有关 getter and setter.

的内容

Answer 2

我对此进行了更深入的研究，并使用了 typescript Playground。我声明了两个类，一个使用 getter，第二个使用 get 方法，如您的问题所述。

让我们看看它的样子：

在第一个例子中，我们通过以下方式声明了一个获取属性值的方法：

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

翻译成 javascript 后看起来像：

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

关于第二个例子，我们通过以下方式声明了 getter：

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

翻译后的样子：

var GetterGreeter = (function () {
   function GetterGreeter(message) {
       this._greeting = message;
   }
   Object.defineProperty(GetterGreeter.prototype, "greeting", {
       get: function () {
           return this._greeting;
       },
       enumerable: true,
       configurable: true
   });
   return GetterGreeter;
}());

（你可以玩一下声明和翻译成 javascript here）

正如您在 get 方法中看到的（如第一个示例中所示），该方法是在原型上声明的，在第二个示例中使用 getter 模式打字稿使用 defineProperty api。

在这两种情况下，我们都在调用一个方法，angular 还将在其更改检测期间调用一个方法，以识别更改并重新呈现。

在我看来，这只是相同方法的语法糖，我看不到其中一种方法有任何性能优势。

Answer 3

如果您是 getter 或方法，从技术角度来看并不重要。

有些人使用约定 getter 应该表现得类似于一个字段，而不是进行昂贵的计算，而如果计算不仅仅是一些非常基本的事情，例如构建一个全名由名字、中间名和姓氏组成。

我认为遵循 Angular 的区别是一个很好的做法，因为对于视图绑定，应该避免昂贵的计算，因为方法或 getter 可以被非常频繁地调用。在这种情况下，最好将结果存储在一个字段中并改为绑定到该字段。

在视图绑定中非常重要的是，方法或 getter 在没有修改依赖项时在后续调用中不会 return 不同的值（如 return {};，这将是被视为新的对象实例并导致类似 ExpressionChangedAfterItHasBeenCheckedError).

的错误

Answer 4

通过 get / set 语法，该方法的行为类似于一个字段，请参见以下示例：

按常规getter方法使用

usingGetterMethod()
{
  let id = this.getId();
}

getId()
{
  return this.reactiveForm.get('id');
}

通过get方式使用

usingGetMethod()
{
  let id = this.id;
}

get id()
{
  return this.reactiveForm.get('id');
}

Angular 2 个模板方法与 getter

Angular 2 templates methods vs getters

javascript

getter-setter

typescript

angular