typescript Angular 2模板方法与getter

aydmsdu9  于 2023-01-27  发布在  TypeScript
关注(0)|答案(4)|浏览(179)

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

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

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

在此:

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

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

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

xxe27gdn

xxe27gdn1#

我对此进行了更深入的研究,并使用了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;
}());

(You我可以在这里处理声明和对javascript的翻译)
正如您在get方法中所看到的(如第一个示例中所示),该方法是在原型上声明的,在使用getter模式的第二个示例中,类型脚本使用defineProperty API。
在这两种情况下,我们都调用了一个方法,angular也将在其变化检测期间调用一个方法来识别变化并重新渲染。
在我看来,这只是相同方法的语法糖,我看不出其中一种方法有任何性能优势。

w6lpcovy

w6lpcovy2#

从技术的Angular 来看,你是一个getter还是一个方法并不重要。
有些使用的约定是getter的行为应该类似于字段,并且不做昂贵的计算,而如果计算不仅仅是一些非常基本的事情,例如从名-中间名-和姓构建全名,则应该使用方法。
我认为这是一个很好的做法,遵循Angular 的区别,因为对于视图绑定,应该避免昂贵的计算,因为方法或getter可以被调用非常频繁。在这种情况下,最好将结果存储在一个字段中,并绑定到该字段。
视图绑定中非常重要的一点是,当没有修改依赖项时,方法或getter不会在后续调用中返回不同的值(如return {};,它将被视为新的对象示例,并导致类似ExpressionChangedAfterItHasBeenCheckedError的错误)。

vql8enpb

vql8enpb3#

通过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');
}
ttisahbt

ttisahbt4#

不同的是,在第一种情况下,你在表达式中使用函数,而在第二种情况下,你使用的是poperty。

<div>{{something}}</div>

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

使用第二个方法的好处是在类内部使用属性的封装,而您需要在类外部访问它。
getter和setter是ES5规范的一部分。您可以阅读有关gettersetter的内容。

相关问题