跳到主要内容

组件生命周期函数

1. 前言​

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

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

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

2. 各类生命周期函数的区别​

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

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

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

3. 组件生命周期函数​

函数名应用
beforeCreate实例初始化之后调用
created实例创建完成后调用
beforeMount模板编译之前调用
mounted模板编译完成调用
beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy实例销毁之前调用
destroyed实例销毁后调用

4. 组件生命周期函数应用​

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

4.1 添加代码​

打开 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：实例销毁完成');
}

4.2 查看效果​

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

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

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

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

5. 组件生命周期函数与页面生命周期函数的联合使用​

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

5.1 添加代码​

打开 pages/index/index.vue 文件，在 script 标签中添加下面这些页面生命周期函数。

onLoad() {
    console.log('页面生命周期函数onLoad：页面初始化')
},
onShow() {
    console.log('页面生命周期函数onShow：页面显示')
},
onReady(){
    console.log('页面生命周期函数onReady：页面初次显示')
}

5.2 查看效果​

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

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

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

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

像这样比较重复的生命周期函数，我们推荐使用页面生命周期函数，比如：

组件生命周期函数 created 可以替换为页面生命周期中的 onLoad；

组件生命周期函数 mouted 可以替换为页面生命周期中的 onReady。

6. 小结​

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

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

  • 能区分组件生命周期函数和页面生命周期函数，知道两者并不冲突；
  • 了解组件生命周期函数的用法；
  • 了解组件生命周期函数、页面生命周期函数的应用场景。