我想知道这样做是否有任何好处:
<div>{{getSomething()}}</div>
export class MyComp {
getSomething() { return ...}
}
关于这个:
<div>{{getSomething}}</div>
export class MyComp {
get getSomething() { return ...}
}
使用方法与 getter 来显示计算数据。
最佳答案
我对此进行了更深入的研究,并使用了 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 方法中看到的(如您的第一个示例),该方法是在原型(prototype)上声明的,在您使用 getter 模式的第二个示例中,typescript 使用 defineProperty api。
在这两种情况下,我们都在调用一个方法,angular 也会在其变化检测期间调用一个方法来识别变化并重新渲染。
在我看来,这只是相同方法的语法糖,我看不到其中一种方法有任何性能优势。
关于javascript - Angular 2 模板方法与 getter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43166792/