小程式生命週期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

註冊程式：應用生命週期 App({...})

• 使用者首次開啟小程式，觸發 onLaunch（全域性只觸發一次）

• 小程式初始化完成後，觸發onShow方法，監聽小程式顯示

• 小程式從前臺進入後臺，觸發 onHide方法

• 小程式從後臺進入前臺顯示，觸發 onShow方法

• 小程式後臺執行一定時間，或系統資源佔用過高，會被銷燬

前臺、後臺定義： 當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。

只有當小程式進入後臺一定時間，或者系統資源佔用過高，才會被真正的銷燬。

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

註冊頁面：頁面生命週期 Page({…})

• 小程式註冊完成後，首次渲染頁面觸發一次onLoad方法

• 一個頁面只會呼叫一次

• 接收頁面路由帶過來的引數，可處理介面資料

• 頁面顯示觸發onShow方法

• 頁面初次渲染完成時觸發onReady方法

• 渲染頁面元素和樣式，一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動

• 頁面隱藏/切入後臺時觸發onHide方法。

• 如 navigateTo 或底部 tab 切換到其他頁面，小程式切入後臺等

• 當小程式有後臺進入到前臺執行或重新進入頁面時，觸發onShow方法

• 每次頁面切換都會執行一次onShow

• 頁面解除安裝時觸發onUnload。如redirectTo或navigateBack到其他頁面時

應用生命週期影響頁面生命週期

• 小程式初始化完成後，頁面首次載入觸發onLoad，一個頁面只會呼叫一次

• 當小程式進入到後臺，先執行 頁面onHide 方法再執行 應用onHide 方法

• 當小程式從後臺進入到前臺，先執行 應用onShow 方法再執行 頁面onShow 方法

更新檢視：

• 將值繫結到 data 物件上

• this.setData({...})

• 單向資料流

React 生命週期

• getDefaultProps()

• getInitialState()

• componentWillMount()

• render()：first time

• componentDidMount()

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nexrState)

• componentWillUpdate(nextProps, nexrState)

• render()：after first time，會執行componentDidUpdate、componentWillUnmount

• componentDidUpdate()

• componentWillUnmount()

• 栗子(生命週期執行順序)：父元件componentWillMount() => 子元件componentWillMount() => 子元件componentDidMount() => 父元件componentDidMount()

更新檢視：

• 將值繫結到 state 物件上

• this.setState({...})

• 單向資料流

Vue 生命週期

PS：標 * 處表示可以手動介入

• * beforeCreate

• 在繫結監聽資料方法以及初始化各個事件之前(僅一次)

• 元件剛被建立，元件屬性計算之前，如data屬性等

• Observer Data 

• 繫結監聽資料方法

• 雙向資料繫結（Object.defineProperty）：檢視到資料（e.target.value），資料到檢視（setter、getter）

• InitEvents 

• 初始化各個事件：watch methods等

• * created

• 在繫結監聽資料方法以及初始化各個事件完成之後(僅一次)

• 元件例項建立完成，屬性已繫結，如data、methods等，dom還未生成，$el屬性還不存在

• has 'el' option 

• 判斷物件中有沒有el屬性，例 new Vue({ el: '#app'})，

• 如果有則繼續編譯，若沒有，暫停編譯(停止生命週期)，直到vm.$mount(el)被呼叫再繼續編譯

• has 'template' option

• 判斷物件中有沒有template屬性，例new Vue({ template: '<div></div>'})，

• 如果有，則將其作為模板編譯成render函式，如果沒有，則把外部html作為模板編譯，

• 例：<div id="app"><p>外部模板</p></div>, ps: template引數選項的優先順序要比外部的HTML高

• 再如果，二者都不存在，則報錯

• * beforeMount

• 載入掛載dom節點、模板編譯完成之前 (僅一次)

• create裡的setTimeout可以寫在這裡

• create vm.$el and replace "el" with it 

• 載入dom節點,建立vm.$el來代替"el"

• * mounted

• 載入掛載dom節點、模板編譯完畢 (僅一次)

• * beforeUpdate

• 監聽的data物件上的屬性發生變化時，在重渲染虛擬dom以及補丁虛擬dom之前(每一次)

• Virtual DOM re-render and patch

• 重渲染 虛擬dom 以及補丁虛擬dom

• * updated

• 監聽的data物件上的屬性發生變化時，在重渲染虛擬dom以及補丁虛擬dom之後(每一次)

• * activated

• 設定了keep-alive（路由中），那麼元件被啟用時呼叫

• * deactivated

• 設定了keep-alive（路由中），那麼元件被移除時呼叫

• * beforeDestroy

• 當vm.$destroy被呼叫時，即 摧毀 當前元件中的watchers、child components 和各個事件監聽之前

• teardown watcher，child components and event listeners

• 摧毀當前元件中的watchers、child components 和各個事件監聽

• destroyed

• 摧毀當前元件中的watchers、child components 和各個事件監聽之後，啥也幹不了了

更新檢視

• 將值繫結到 data 函式上，再用 v-bind 將值繫結到相應元素上

• 直接用 this.xxx 獲取vue例項上資料物件裡的值進行操作

• 雙向資料繫結