2021-08-08 页面生命周期与组件生命周期

页面与Vue实例各自的生命周期

写代码的时候了解到页面与Vue实例各自存在生命周期，Mark一下。

1、页面的生命周期

link uni-app 页面生命周期
遵循驼峰命名规则

• onLoad 页面加载时触发，只一次。
• onShow 页面显示时触发，可多次，如最小化后重新打开。
• onReady 页面渲染完成时触发，只一次。
• onHide 页面隐藏时触发。
• onUnload 页面卸载时触发。

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

wx.navigateTo跳转时钩子函数的触发 （未验证 待补充）

• 新页面的打开 onLoad>onShow>onReady
• 跳走后前一页面会onHide
• 返回前一页面，当前页面onUnload，前一页面onShow

2、Vue实例的生命周期

link uni-app 组件生命周期

• created 在实例创建完成后被立即调用。
• mounted 实例被挂载后调用,mounted 不会保证所有的子组件也被挂载。
• updated 重绘视图，computed计算属性和watcher侦听器更常用。
• activated 被 keep-alive 缓存的组件激活时调用。
• destroyed 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})