生命周期 === [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); }, ```