Javascript Angular 2模板方法与getter

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

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

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

{{getSomething（）}
导出类MyComp{
getSomething（）{return…}
}

在这方面：

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

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

{{getSomething}
导出类MyComp{
获取getSomething（）{return…}
}

---

使用方法vs getter显示计算数据

区别在于，第一种情况下在表达式中使用函数，但第二种情况下它不是函数。所以你不能用

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

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

{{getSomething（）}
导出类MyComp{
获取getSomething（）{return…}
}

---

使用第二种方法的好处是在类内部使用属性的封装，并且需要在类外部访问它

---

getter和setter是ES5规范的一部分。您可以阅读和。

我对此进行了深入研究，并使用了typescript。 我声明了两个类，一个是getter类，另一个是get方法类，如您的问题中所述

让我们看看它的样子：

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

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;
}());

在第一个示例中，我们声明了通过以下方式获取属性值的方法：

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

翻译成javascript后，它看起来像：

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

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;
}());

关于第二个示例，我们用以下方式声明了getter：

class Greeter {
  greeting: string;
  constructor(message: string) {
      this.greeting = message;
  }
   getGreeting() {
      return this.greeting;
  }
}

class GetterGreeter {
   _greeting: string;
   constructor(message: string) {
       this._greeting = message;
   }
    get greeting() {
       return this._greeting;
   }
}

翻译后看起来像：

var Greeter = (function () {
   function Greeter(message) {
       this.greeting = message;
   }
   Greeter.prototype.getGreeting = function () {
       return this.greeting;
   };
   return Greeter;
}());

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模式typescript使用defineProperty api

在这两种情况下，我们都在调用一个方法，angular也会在其更改检测期间调用一个方法来识别更改并重新渲染

---

在我看来，这只是同一种方法的一种语法优势，我看不出其中一种方法对性能有任何好处。

如果你是一个getter或一种方法，从技术角度看并不重要

有些人使用约定，即getter的行为应该类似于字段，并且不进行昂贵的计算，而如果计算不仅仅是一些非常基本的事情，例如从名字、中间名和姓氏构建全名，则应该使用方法

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

---

视图绑定中非常重要的一点是，当没有修改依赖项时，方法或getter不会在后续调用中返回不同的值（如

return{}；

，这将被视为新的对象实例，并导致错误，如

expressionChangedTerithasBeenCheckedError

）.

我认为这只是对同一事物的一种句法上的糖分。您是否看到使用其中一个有什么好处？不，这是我的问题，我试图了解是否有不同的。在模板中不使用getter。这样就不太清楚每次检测到更改时都会执行计算，并且会使检测性能问题变得更加困难。例如，{{name}}可能确实是一个复杂的getter，需要半秒钟才能运行。我宁愿编写{{name（）}}，它清楚地表明正在执行代码，并允许我在以后发现和改进性能问题。由于angular应用程序具有急切的变化检测功能，因此很容易降低angular应用程序的速度，因此请注意这一点。我想您的意思是“我认为这不是angular应用程序的良好实践”。这意味着我们不应该在模板中使用方法/getter。我可能误解了：-）事实上，我写这篇文章的意思是这样的，但谢谢你的暗示，我的意思还不够清楚。在绑定中使用getter和方法本身并不坏，但绑定到字段更有效。我的主要观点是，一定要避免绑定到昂贵的方法调用。是否会是一个昂贵的方法来生成一个Array.filter（）操作？在视图中，您希望按某个字段过滤主数据。如果您直接绑定到视图中的方法，则可能是（使用

ChangeDetectionStrategy.OnPush时更少）。每次运行更改检测时都会调用它。如果应用筛选器并将结果分配给某个字段并绑定到该字段，则效率会更高。使用getter，您可以使用
{{getSomething}}
在模板中访问它。您将它视为属性而不是函数。@Simon如果它是函数，它就不能是属性，反之亦然。我说过它被视为属性/属性：如果您有
获取getSomething（）{}
并使用
{getSomething（）}
在模板中，由于getter不可调用，您将度过一段不愉快的时光。@Simon您没有仔细阅读此答案。代码当然不起作用。它解释了一个差异，您不应该在代码中使用它。普通方法是否每次都返回一个新数组？例如，
getSomething（）{返回this.someArray}
即使someArray中没有更改，也会返回一个新数组吗？