なぜ4番目にテンプレートが4回コンパイルされるのですか？

Question

私は角度テンプレート（補間）の内側から関数を呼び出していますが、不思議なことに関数は4回呼び出されています!!

バインディング値が更新された場合の変更検出プロセスのキックスタートを理解したので、変更検出がどのように機能するかは知っています。このシナリオでは

は、私のような任意のものを変更/結合ではないのです。..

var i = 0; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <div> 
 
     <h1>{{ parentCounter() }}</h1> 
 
    </div> 
 
    `, 
 
}) 
 
export class App { 
 
    name:string; 
 
    constructor() { 
 
    
 
    } 
 
    
 
    parentCounter(){ 
 
    alert(`${++i} called`); 
 
    return 5; 
 
    } 
 
}

参考：https://plnkr.co/edit/pta0s0nzcsLdTsjCtb3D?p=preview

注：テンプレートは4回前にコンパイルました非同期イベント

あなたは

<h1>{{ parentCounter() }}</h1> 

のようなビューの機能に特異的に結合する場合

Answer 1

は、角度は、この機能変化検出が実行されるたびに呼び出されます。

この関数が呼び出されるたびに新しいオブジェクトを返す場合、開発モードでも例外が発生します。

それが最後の

をチェックしたので、式は、フィールドへの呼び出しの結果を代入し、代わりにそのフィールドにバインドすることをお勧めし変更されました。

var i = 0; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h1>{{ counter }}</h1> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    counter:number; 
    constructor() { 
    this.counter = this.parentCounter(); 
    } 

    parentCounter(){ 
    alert(`${++i} called`); 
    return 5; 
    } 
} 

Answer 2

前の回答で述べたように、あなたが価値が原因後続の呼び出しに変更されていないことを確認するための画像で見ることができるように2つのコールが各時間があるコメント（冪等検定）。最初の2回の呼び出しは、ページのブートストラップ/初期解析から開始され、readystatechangeイベントが発生し、ビューの更新をトリガーする自動zone/asyncハンドラの結果として、2番目の呼び出しがトリガされます。

---

また、これを追加するだけで、実際には重要ではないでしょう。パフォーマンスの問題は、データバインディングが大量のリピータにあるコンポーネントで、数十万のデータバインディングを持つページにつながる（そして、人々はそれが遅いと不満を表明します:)）、タイムラインとクロムプロファイリングツールをチェックしてください。また私自身を調べるために、debuggerキーワードとコールスタックを使用して、一般的に何が起こっていたのかを確認しました。