Me pregunto si hay algún beneficio para hacer esto:
<div>{{getSomething()}}</div> export class MyComp { getSomething() { return ...} }Más allá de esto:
<div>{{getSomething}}</div> export class MyComp { get getSomething() { return ...} }Use métodos vs getters para mostrar datos calculados.
Miré más profundamente en esto y jugué con mecanografiado Playground. Declaré dos clases, una con getter y la segunda con el método get como se describe en sus preguntas.
Veamos cómo se ve:
En el primer ejemplo, declaramos un método para obtener el valor de la propiedad de la siguiente manera:
class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } getGreeting() { return this.greeting; } }Que después de la traducción a javascript se ve así:
var Greeter = (function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.getGreeting = function () { return this.greeting; }; return Greeter; }());Y respecto al segundo ejemplo donde declaramos un getter de la siguiente manera:
class GetterGreeter { _greeting: string; constructor(message: string) { this._greeting = message; } get greeting() { return this._greeting; } }Que después de la traducción se ve así:
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; }());(Puedes jugar con la declaración y la traducción a javascript aquí )
Como puede ver con el método get (como en su primer ejemplo), el método se declara en el prototipo y en su segundo ejemplo, usando el mecanografiado del patrón getter, usa la API defineProperty.
En ambos casos, estamos invocando un método y angular también llamará a un método durante su detección de cambios para identificar cambios y volver a renderizar.
Tal como lo veo, esto es solo un azúcar sintáctico para el mismo enfoque y no veo ningún beneficio de rendimiento para uno de los métodos.
Si eres un captador o un método, no importa desde un punto de vista técnico.
Algunos usan la convención de que un captador debe comportarse de manera similar a un campo y no realizar cálculos costosos, mientras que se debe usar un método si el cálculo es más que algunas cosas muy básicas como, por ejemplo, construir un nombre completo desde el primero, el segundo y el último. nombre.
Creo que esta es una buena práctica para seguir esa distinción para Angular, porque para el cálculo costoso de enlace de vista se debe evitar porque el método o getter se puede llamar con mucha frecuencia. En tal caso, es mejor almacenar el resultado en un campo y vincularlo al campo.
Muy importante en el enlace de vista es que el método o captador no devuelva valores diferentes en las llamadas posteriores cuando no se modificaron las dependencias (como return {}; , que se trataría como una nueva instancia de objeto y causaría un error como ExpressionChangedAfterItHasBeenCheckedError ).
La diferencia es que en el primer caso usas una función en la expresión, pero en el segundo caso no es una función. Entonces no puedes usar
<div>{{getSomething()}}</div> export class MyComp { get getSomething() { return ...} }Los beneficios de usar el segundo método es usar la encapsulación de la propiedad dentro de la clase y necesita acceder a ella fuera de la clase.
Getters y setters son parte de la especificación ES5. Puedes leer sobre getter y setter .