Angular 9 正式發佈,有什麼騷東西呢?

前言: 都說 ng 上手成本高,可是當你上手 ng 以後構建一個 web 應用是很是爽的,距離如今不到20小時,在 Angular 的官方 github 上發佈了 Angular 9 , 而且 Angular conf 也將在二月八號凌晨兩點,正式對外發布,帶來哪些新東西呢? 本文帶你預覽一下git

1. Ivy !!!!

重中之重就是新的渲染引擎 Ivy , 在 ng 早些版本的時候曾經使用過預覽版的 Ivy , 後來出於穩定性緣由一直都沒有使用在項目上,新的渲染引擎將爲咱們帶來巨大的性能提高。官網對其描述以下:github

Ivy is the code name for Angular's next-generation compilation and rendering pipeline. With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as View Engine.web

Ivy 是 Angular 下一代編譯器和渲染管道的名字,隨着 Angular 9 的發佈,新的渲染引擎和 runtime 指令都將做爲默認,而不是早些版本的 View Engine.app

雖然並非表面上的那種巨大改變,可是在你構建 ng app 的時候,使用 template 的時候,Ivy 在你看不見的地方作了不少的東西,比方說更小的 boundle 體積, AOT ( Ahead Of Time) 做爲默認選項,在以前開發項目的過程當中,使用 ng serve 開發的過程當中其實使用的是 JIT ( Just In Time ) 編譯,好處是開發過程當中很快的編譯速度以及更新文件後頁面視圖刷新的也很快,可是缺點是當使用 ng build – prod 時候纔會發現不少開發中難以發現的參數問題,如今使用 AOT 做爲默認選項後,而且 Ivy 更加快速的編譯效果,能爲咱們開發過程當中提供更加穩定的,更加高效的開發效率。性能

2. Template type checking 模板類型檢查

如今 ng 能夠像 TS 同樣去檢查模板中綁定的數據類型,模板中表達式的數據類型,而且在控制檯能夠直接反饋出來,目前支持三種模式而且均可以在 tsconfig 文件中進性修改。ui

首先看以下案例: ng 8.3 版本spa

@Component({
    selector: 'app-user',
    templateUrl: '<p>user name is {{ name }}</p>',
})
export class UserComponent implements OnInit {
    @Input() name: string;
    ngOnInit() {}
}
// 在 User 組件中代表了 Input 屬性類型是 string , 而後用戶的名字會在這裏表述出來


// 而後在其父級組件中使用
@Component({
    selector: 'app-root',
    templateUrl: '<app-user [name]="user.age"></app-user>',
})
export class AppComponent {
    user = {
        name: '王花花',
        age: 10
    };
}
複製代碼

此時若是運行這個項目會發現並無報錯,可是 number 類型缺傳給了 string 類型,這在實際開發的時候很容易就會在不經意間形成參數傳遞問題。code

如今經過設置 "strictTemplates": true 就能夠對 template 傳參類型檢查,此時 terminal 就會返回類型錯誤。 cdn

3. @ViewChild 中 可選 static 迴歸

小的迴歸, @ViewChild('user', { static: false }) userElement: ElementRef<HTMLElement>;blog

如今只有 static : true 的時候才須要填寫這一項,emmmm 之前 ng6 時候的見過

總結

原生支持 Typescript, rxjs 使得我很喜歡用 Angular, 而且強大的 cli 在建立組件,pipes,service 的時候用起來可謂是順手的不得了(不吹不黑)。

相關文章
相關標籤/搜索