不少同学可能会有疑问，在前面小节讲过了应用生命周期和生命周期，怎么又出来了组件生命周期…

其实应用生命周期和生命周期是 中的，而组件生命周期是 Vue 的特性。大部分情况下，这些生命周期可以合并在一起使用，个别情况会有一些区别。

那什么场景可以使用生命周期，什么场景又可以使用组件生命周期呢？这些我们本小节来了解一下。

应用生命周期比较好区分，是用来监听整个应用的。有很好的判断就是，写在 App.vue 中生命周期就是应用生命周期。

生命周期和组件生命周期都是对中状态的监听，比较容易混淆。

简单来说，应用生命周期仅在 page 有效，在单独封装的组件中无效。但是组件生命周期在 page 和单独封装的组件中都有效。

我们在前面小节创建的 Login 组件中验证组件生命周期的应用， Login 组件是我们前面小节实现的弹窗组件。

打开 components/login/login.vue ，在 script 中生命周期。要注意这些不要写在 methods 中，与 methods 是同级。
实例：

beforeCreate(){
    console.log('beforeCreate：实例初始化');
},
created(){
    console.log('created：实例创建完成');
},
beforeMount(){
    console.log('beforeMount：模板编译之前');
},
mounted(){ 
    console.log('mounted：模板编译完成');
},
beforeUpdate(){
    console.log('beforeUpdate：数据更新之前');
},
updated(){
    console.log('updated：数据更新完成');
},
beforeDestroy(){ 
    console.log('beforeDestroy：实例销毁之前');
},
destroyed(){
    console.log('destroyed：实例销毁完成');
}

点击工具栏–运行–运行到内置浏览器，打开控制台，控制台中会打印下面的信息：

beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成

点击授权按钮，会继续打印下面信息，弹窗实例就被销毁了：

beforeDestroy：实例销毁之前
destroyed：实例销毁完成

大家可能看到这里还有一点云里雾里，我们再在 Login 组件的 index 中生命周期，来看看这些生命周期是怎样合作的。

打开 pages/index/index.vue ，在 script 中下面这些生命周期。

onLoad() {
    console.log('生命周期onLoad：初始化')
},
onShow() {
    console.log('生命周期onShow：')
},
onReady(){
    console.log('生命周期onReady：初次')
}

点击工具栏–运行–运行到内置浏览器，控制台中会打印下面的信息：

生命周期 onLoad：加载
生命周期 onShow：
beforeCreate：实例初始化
created：实例创建完成
beforeMount：模板编译之前
mounted：模板编译完成
生命周期 onReady：初次

生命周期 onLoad、onShow 会先运行，接着 Login 组件中的 beforeCreate、created 等组件生命周期开始运行。组件加载完成后，生命周期 onReady 开始运行。

我们会发现，有的生命周期与组件生命周期，在项目开发过程中会有点重复，比如 onLoad 和 created（里面都放的是初始化时需要触发的）、onReady 和 mouted（里面都放的是加载完成后只需要一次的，比如的信息）

像这样比较重复的生命周期，我们推荐使用生命周期，比如：
组件生命周期 created 可以替换为生命周期中的 onLoad；
组件生命周期 mouted 可以替换为生命周期中的 onReady。

生命周期的种类比较多，甚至有些是重复的可以互相替代，最好自己写对比一下，加深理解。

本节课程我们主要介绍了组件生命周期，本节课程的重点如下：