就是…
最近寫了一個很多輸入欄位的表單專案
然後整天看到
[Violation] ‘XXXX’ handler took OOOms
之類的警告
而且出了Chrome平台後(像是IE)
網頁就常常出現卡頓的狀況
前陣子因為formgroup沒有解除subscribe造成BUG
所以發現自己可能有許多元件都是默默地在佔用監聽資源
為了要改進效能
所以打算重新翻修整理專案
專案的變動偵測大概都用以下幾種方式寫的
// 監聽formgroup欄位是否變動
.valueChanges.subscribe
// 常用於控制是否顯示和隱藏，開發時有用到一開始產生但是根據條件再隱藏起來或消失
*ngIf=“function()”
// 也是控制顯示隱藏，但這個用參數控制
[fxSHow] / [fxHide] = “參數”
// 朋友建議這樣寫可以比較不吃資源
(change)=“function()”
想詢問這四種寫法哪種如果沒有解除監聽最吃資源
感覺會一直消耗資源或是偵測的資源的就是以上這幾類
想詢問有甚麼比較節省效能的寫法
或是那些該改寫成哪種
或是個別寫法運用的時機點
感謝 
1個讚
昂貴會在*ngIf=“function()”千萬別這麼使用
這個效能會非常差，每次zone檢查的時候都會重新執行方法
其他差別不大，都是單次計算
1個讚
@YouShun
有…
這個真的超吃效能
今天處理事情在裡面插console.log
才發現這寫法會一直狂呼叫…
真的是吃效能的怪獸…
感謝
所以正確寫法是
設定一個變數
假設isShowAAA
設定
然後用function去控制這isShowAAA的true / false
*ngIf = " isShowAAA "
這樣寫對嗎? 
以及想問
[fxShow]=function()
[fxHide]=function()
這樣也是會和*ngIf 一樣狂吃效能嗎?
1個讚
是的，所有在template的function都會不斷被執行，裡面不可以有太多計算
2個讚
那
在reactive form的欄位
設置錯誤訊息
<mat-error *ngIf="AAAAAFormGroup.get('aaaa0010')?.invalid">
{{ getErrorMessage('aaaa0010') }}
</mat-error>
這樣也會很吃效能嗎?
會，只要他被顯示後就會吃效能，所以使用 pipe 這種方式來處理或是寫更細一點，例如 formGroup.get('xxxx').hasError('somehting')
然後直接將錯誤訊息寫死
1個讚