Angular 2模板方法与getter

Question

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

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

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

在此:

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

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

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

Answer 1

我深入研究了这个并玩弄打字游戏.我用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的翻译)

正如您在get方法中看到的那样(在第一个示例中),该方法在原型上声明,在第二个示例中,使用getter pattern typescript使用defineProperty api.

在这两种情况下,我们都在调用方法,而angular也会在更改检测期间调用方法来识别更改并重新呈现.

我认为这对于同样的方法来说只是一种语法糖,我认为其中一种方法没有任何性能上的好处.

Answer 2

如果你是一个吸气剂,或者从技术角度来看方法无关紧要.

有些使用getter应该表现得类似于字段的惯例,而不是进行昂贵的计算,而如果计算不仅仅是一些非常基本的东西,例如从第一个中间和最后一个构建一个全名,那么应该使用一个方法.名称.

我认为遵循Angular的这种区别是一种很好的做法,因为对于视图绑定应该避免昂贵的计算,因为可以经常调用方法或getter.在这种情况下,最好将结果存储在字段中,然后绑定到字段.

在视图绑定中非常重要的是,当没有修改依赖项时,方法或getter不会在后续调用中返回不同的值(例如return {};,将被视为新对象实例并导致类似"表达式自上次更改以来的错误"选中".)