我想知道这样做是否有好处:
<div>{{getSomething()}}</div>
export class MyComp {
getSomething() { return ...}
}
在此:
<div>{{getSomething}}</div>
export class MyComp {
get getSomething() { return ...}
}
使用方法与getter显示计算数据。
我想知道这样做是否有好处:
<div>{{getSomething()}}</div>
export class MyComp {
getSomething() { return ...}
}
在此:
<div>{{getSomething}}</div>
export class MyComp {
get getSomething() { return ...}
}
使用方法与getter显示计算数据。
4条答案
按热度按时间xxe27gdn1#
我对此进行了更深入的研究,并使用了typescript Playground。我声明了两个类,一个使用getter,另一个使用get方法,正如您的问题中所描述的。
让我们看看它是什么样子:
在第一个示例中,我们以以下方式声明了一个用于获取属性值的方法:
翻译成javascript后看起来像这样:
关于第二个示例,我们以下面的方式声明了getter:
翻译后如下所示:
(You我可以在这里处理声明和对javascript的翻译)
正如您在get方法中所看到的(如第一个示例中所示),该方法是在原型上声明的,在使用getter模式的第二个示例中,类型脚本使用defineProperty API。
在这两种情况下,我们都调用了一个方法,angular也将在其变化检测期间调用一个方法来识别变化并重新渲染。
在我看来,这只是相同方法的语法糖,我看不出其中一种方法有任何性能优势。
w6lpcovy2#
从技术的Angular 来看,你是一个getter还是一个方法并不重要。
有些使用的约定是getter的行为应该类似于字段,并且不做昂贵的计算,而如果计算不仅仅是一些非常基本的事情,例如从名-中间名-和姓构建全名,则应该使用方法。
我认为这是一个很好的做法,遵循Angular 的区别,因为对于视图绑定,应该避免昂贵的计算,因为方法或getter可以被调用非常频繁。在这种情况下,最好将结果存储在一个字段中,并绑定到该字段。
视图绑定中非常重要的一点是,当没有修改依赖项时,方法或getter不会在后续调用中返回不同的值(如
return {};
,它将被视为新的对象示例,并导致类似ExpressionChangedAfterItHasBeenCheckedError
的错误)。vql8enpb3#
通过
get
/set
语法,该方法的行为类似于字段,参见以下示例:通过常规getter方法使用
通过get方法使用
ttisahbt4#
不同的是,在第一种情况下,你在表达式中使用函数,而在第二种情况下,你使用的是poperty。
使用第二个方法的好处是在类内部使用属性的封装,而您需要在类外部访问它。
getter和setter是ES5规范的一部分。您可以阅读有关getter和setter的内容。