1.页面生命周期：

通常用在页面的交互上，比如监听页面加载，监听页面损毁，页面初始化、页面传参。
常见的就是：onLoad() 页面加载 | onShow() 页面显示 | onReady() 页面初次渲染完成 | onHide() 页面隐藏

首先我们需要理清一个概念，何为页面，何为组件，不然你就分不清页面生命周期和组件生命周期的关系。

我们常说一个.vue后缀的文件就是一个小组件，如果这个.vue文件在pages.json中进行了页面配置，那么它就是一个页面了，只有成为页面才可以使用页面的生命周期，反之如果未在pages.json中进行配置，那么它就是组件。

组件：我们一般喜欢放在compoents目录下。
页面：放置在pages目录下，而且每新建一个页面都要新建一个目录用于存放页面，使页面相互独立。

2.组件生命周期：又叫生命周期钩子函数（共8个）

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

这个组件的生命周期很有意思的哈，这个八个阶段它仿佛就是介绍了从一个呱呱坠地的婴孩到牙牙学语再到茁壮成长然后慢慢老去...的这么一个人生过程，这一生的每一个阶段都有它要完成的任务、分工明确。

案例准备：
首先在页面中引入组件

test.vue组件

<template>
    <view class="">
        这是一个组件页面
    </view>
</template>

<script>
    export default {
        
    }
</script>

在profile.vue页面中引入test.vue组件。

<template>
    <view>
        <test></test>
    </view>
</template>

<script>
    import test from '../../components/test.vue'
    export default {
        components:{
            test
        }
    }
</script>

1.beforeCreate:第一个阶段，也就是婴儿阶段，代表实例已经开始初始化，但数据还没开始初始化完成，包括页面也还没开始渲染，只是单纯的实例初始化了,组件还未创建完成。

因为现在是测试组件的生命周期，所以我们的的关注点集中在test.vue这个组件上。

<script>
    export default {
        data () {
            return {
                num: 100
            }
        },
        beforeCreate:function(){
            console.log('实例已经开始初始化了！')
            console.log(this.num)
        }
    }
</script>

这个console.log(this.num)会在控制台得到输出吗？

显然，我们在控制台打印这个this.num会得到一个undefined的结果。

这是为什么呢？

因为我们在上面说过，beforeCreate仅仅代表这个实例已经开始初始化，但数据还没开始初始化完成，也就是说this.num根本不会生效，你可以这样理解，它还是个婴儿，还处于在这个刚刚出生的阶段，你不能指望他立马就会开口说话。

2.created:这一阶段代表实例创建完成，换言之就是我们的组件已经创建完成，这也代表着一些基本的数据可以拿到手、一些基本的方法可以定义使用，但不代表这个实例（组件）已经被挂载上了，在这一阶段，我们一般就是进行一些数据的初始化操作。

此外，在这一个阶段，我们已经可以进行一些简单的数据绑定，呈现在页面上，因为我们拿到了数据。

3.beforeMount：这一阶段，实例尚未挂载，但页面上可以进行绑定数据输出，不过组件还没有渲染到页面上。

4.mounted：这一阶段，组件已经渲染到页面上。只有这一个阶段才支持操作DOM

5.beforeUpdate和6.updated都是数据更新方面的，只支持在H5端，不常用。

7.beforeDestroy实例销毁前调用。

8.destroyed：组件销毁后调用,监听组件销毁。

profile.vue页面中，使用注册的test组件，通过v-if绑定一个布尔值进行判断，布尔值为false即组件被移除销毁。

利用button组件绑定事件，实现组件的切换功能，到底是创建组件还是销毁组件。

实现的效果：

在destroyed这个阶段可以实现清除计时器的功能。

<template>
    <view id="myView">
        这是一个test组件页面
    </view>
</template>

<script>
    export default {
        data () {
            return {
                timer:null
            }
        },
        created:function(){
            console.log('created:组件创建完成')
                this.timer = setInterval(()=>{
                console.log('执行定时器')
            },1000)
        },
        destroyed:function(){
            console.log('组件已经销毁')
            clearInterval(this.timer)
        }
    }
</script>

3.应用生命周期：

app.vue文件里面的这三个就是。

onLaunch: function() {
            console.log('App Launch')
        },
onShow: function() {
            console.log('App Show')
        },
onHide: function() {
            console.log('App Hide')
        }

4.还有一些特殊功能的监听类的生命周期（很多也很杂，具体看功能使用）：

比如：
监听页面上拉加载：onReachBottom
监听页面下拉刷新：onPullDownRefresh