各类生命周期函数的区别

发布时间：2023-04-24 14:16:31 所属栏目：教程来源：

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

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

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

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

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

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

组件生命周期函数应用
我们在前面小节创建的 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：实例销毁完成
5. 组件生命周期函数与页面生命周期函数的联合使用
大家可能看到这里还有一点云里雾里，我们再在调用 Login 组件的 index 页面中添加页面生命周期函数，来看看这些生命周期函数是怎样合作的。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!