生命週期鉤子函數

生命週期鉤子函數，單從這個字面上理解，彷佛不太易懂，咱們來看vue的官網中介紹的：「每一個 Vue 實例在被建立時都要通過一系列的初始化過程——例如，須要設置數據監聽、編譯模板、將實例掛載到 DOM 並在數據變化時更新 DOM 等。同時在這個過程當中也會運行一些叫作生命週期鉤子的函數。」。看這些，也許並不那麼好理解，咱們能夠類比原生js裏相似的行爲，onload事件:

`

<script>
    window.onload = function () {
        console.log('DOM加載完畢才執行js')
    }
</script>
複製代碼

`

上面是一個很簡單的onload應用，w3c官網解釋爲：onload 事件會在頁面或圖像加載完成後當即發生,相信你們對它不陌生，也都會用。而vue的生命週期，或者說其它框架，react, angular，都是相似於這樣的概念。好比vue的：created:

`

new Vue({
  data: {
    a: 1
  },
  created: function () {    // 這個是實例建立後的生命週期函數
    // `this` 指向 vm 實例
    console.log('a is: ' + this.a)
  }
})
複製代碼

`

上面這個例子就是說，vue實例建立後，若是用es5面向對象的語法解釋就是var instarce = new Vue() ,也就是說咱們new 完後拿到這個實例時觸發的一個行爲。angular建立實例後的初始化就是ngOnInit,react裏的就是componentWillMount。

那麼這三大框架各自都有哪些生命週期函數呢，它們的執行順序是怎樣的呢？下面看各自的介紹：

Vue生命週期函數：

vue生命週期函數，共有八個，執行順序以下：

• beforeCreate 實例建立前；
• created 實例建立後；
• beforeMount 掛載DOM前；
• mounted 掛載DOM後，這個是最接近onload事件的；
• beforeUPdate 數據更新前；
• updated 數據更新後；
• beforeDestroy 實例銷燬前；
• destroyed 實例銷燬後；

這八個生命週期函數，根據不一樣的業務需求，去寫你的業務邏輯。在這裏最經常使用的主要就是created和mounted這兩個了。vue官網生命週期；

React生命週期函數：

react生命週期函數，執行順序以下：

1. 組件加載時執行的生命週期函數：

• constructor 構造函數執行
• componentWillMount() 組件初始化時調用；
• render() 建立虛擬dom;
• componentDidMount() 組件渲染後調用，也就是咱們操做react dom時；

2. 組件數據更新的時候觸發的生命週期函數：

• componentWillReceiveProps() 父組件改變props傳值的數據時調用；
• shouldComponentUpdate(nextProps, nextState) 組件接受新的state或者props時調用;
• componentWillUpdate() 組件將要更新時調用;
• render() 組件渲染；
• componentDidUpdate(); 組件更新完成時調用；

3. 組件實例銷燬時執行的生命週期函數：

• componentWillUnmount() 組件銷燬時調用。

注意：shouldComponentUpdate(nextProps, nextState)生命週期函數是react性能優化很是重要的一環。組件接受新的state或者props時調用，咱們能夠設置在此對比先後兩個props和state是否相同，若是相同則返回false阻止更新，由於相同的屬性狀態必定會生成相同的dom樹，這樣就不須要創造新的dom樹和舊的dom樹進行diff算法對比，節省大量性能，尤爲是在dom結構複雜的時候使用。react生命週期函數官網。

Angular生命週期函數

angular生命週期執行順序以及應用時機：

• ngOnChanges() 當 Angular（從新）設置數據綁定輸入屬性時響應;
• ngOnInit() 在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件;
• ngDoCheck() 檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應;
• ngAfterContentInit() 每當 Angular 把外部內容投影進組件/指令的視圖以後調用；
• ngAfterContentChecked() 每當 Angular 完成被投影組件內容的變動檢測以後調用;
• ngAfterViewInit() 每當 Angular 初始化完組件視圖及其子視圖以後調用;
• ngAfterViewChecked() 每當 Angular 作完組件視圖和子視圖的變動檢測以後調用;
• ngOnDestroy() 每當 Angular 每次銷燬指令/組件以前調用並清掃。

angular生命週期函數官網。

小結

生命週期鉤子函數，其實指的就是咱們的組件實例化構建頁面的一個過程和執行順序，而後根據每一個階段去作相應業務邏輯的處理，完成咱們的業務需求以及功能上的開發。本章節本人也是主要參考這三大框架的文檔來寫的，更多的目的是幫助前端小白同窗快速創建對生命週期這個概念的認識，若有不足煩請指正，謝謝。