生命周期 === [TOC] ***** uni-app 完整支持 Vue 實例的生命周期，同時還支持應用生命周期及頁面生命周期。 # Vue實例生命周期 支持vue實例的如下生命周期函數， * beforeCreate * created * beforeMount * mounted * beforeUpdate * updated * activated * deactivated * beforeDestroy * destroyed > 不要在選項屬性或回調上使用箭頭函數，比如 `created: () => console.log(this.a)` ，因為箭頭函數是和父級上下文綁定在一起的，this 不會是如你做預期的 Vue 實例，且 this.a 也會是未定義的。 # 應用生命周期 uni-app 支持如下應用生命周期函數： | 函數名 | 說明 | |----------|------------------------------------------| | onLaunch | 當uni-app?初始化完成時觸發（全局只觸發一次） | | onShow | 當?uni-app?啟動，或從后臺進入前臺顯示 | | onHide | 當?uni-app?從前臺進入后臺 | > 應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。 App.vue文件： ``` <script> export default { onLaunch: function () { console.log('App Launch') }, onShow: function () { console.log('App Show') }, onHide: function () { console.log('App Hide') } } </script> ``` onLaunch事件可以做一些初始化的操作，如加載緩存到本地的購物車數據，檢測版本升級等。 ``` export default { onLaunch: function () { this.$store.dispatch('loadStorage'); //加載本地緩存的數據 console.log('App Launch') }, ``` 這里加載本地緩存數據使用了VUEX實現。 # 頁面生命周期 uni-app 支持如下頁面生命周期函數： | 函數名 | 說明 | 平臺支持 | |--------------------------|----------------------------------------------------------------------|------------| | onLoad | 監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用于頁面傳參） | | | onShow | 監聽頁面顯示 | | | onReady | 監聽頁面初次渲染完成 | | | onHide | 監聽頁面隱藏 | | | onUnload | 監聽頁面卸載 | | | onPullDownRefresh | 監聽用戶下拉動作，一般用于下拉刷新 | | | onReachBottom | 頁面上拉觸底事件的處理函數 | | | onShareAppMessage | 用戶點擊右上角分享 | 微信小程序 | | onNavigationBarButtonTap | 監聽原生標題欄按鈕點擊事件，參數為Object | 5+ App | | onPageScroll | 監聽頁面滾動，參數為Object | | | onTabItemTap | 當前是?tab?頁時，點擊?tab?時觸發。 | | onPageScroll 參數說明： | 屬性 | 類型 | 說明 | |-----------|--------|----------------------------------| | scrollTop | Number | 頁面在垂直方向已滾動的距離（單位px） | onNavigationBarButtonTap 參數說明： | 屬性 | 類型 | 說明 | |-------|--------|------------------------| | index | Number | 原生標題欄按鈕數組的下標 | 注意 * 先觸發uni-app onReady ，后觸發 vue mounted * 建議使用uni-app onLoad 代替 vue created # 生命周期的例子 比如下面的實例，每秒更新一個隨機數，這個例子演示了uni-app的生命周期中的onLoad和onUnload事件。 首先在頁面加載完成的事件onLoad中創建計時器， ``` onLoad: function(e) { self = this; //self指向vm的實例 this.timer = setInterval(function() { self.random = Math.random(); //修改對象 }, 1000); }, ``` > onLoad事件一般可以帶一個參數，用來給頁面傳遞參數。 然后在onUnload事件中銷毀計時器。 ``` onUnload: function() { if (this.timer) { clearInterval(this.timer); //銷毀定時器 } } ``` 文件pages/lab/gramma/random.vue的內容如下： ``` <template> <view> <view> <text>{{ random }}</text> </view> </view> </template> <script> var self; export default { data: { random: 0, timer: null, }, onLoad: function(e) { self = this; //self指向vm的實例 this.timer = setInterval(function() { self.random = Math.random(); //修改對象 }, 1000); }, onUnload: function() { if (this.timer) { clearInterval(this.timer); //銷毀定時器 } } } </script> <style> </style> ``` 由于Javascript對象的this指針的作用域問題，一般定義個一全局變量self， ``` <script> var self = null; ``` 在onLoad事件中首先初始化為對象自身，方便在生命周期內的其他地方使用。 ``` onLoad: function () { self = this; this.timer = setInterval(function () { self.random = Math.random(); //修改對象 }, 1000); }, ```