Vue中的生命周期介绍
更新时间：2022年03月14日 10:28:27 作者：.NET开发菜鸟
这篇文章介绍了Vue中的生命周期，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
什么是vue的生命周期
Vue中的生命周期是指组件从创建到销毁的一系列过程。看下面这张官方文档的图：
从图片中可以看出Vue的整个生命周期包括8个状态，按照先后顺序分别为：
- beforeCreate
- Created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Vue组件的生命周期共分为三个阶段，如下图所示：
创建阶段和销毁阶段在组件的生命周期中只会执行一次，而更新阶段会执行多次。
先看一下创建阶段完成的事情：
在看更新阶段完成的事情：
最后在看一下销毁阶段完成的事情：
先看下面的一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>生命周期</title>
<!--引入vue.js-->
<script src="./js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'#app',// 2.0不允许挂载到html,body元素上
data:{
msg:'welcome'
},
methods:{
update(){
this.msg="欢迎";
},
destroy(){
this.$destroy();
}
},
//创建前状态 el和data并未初始化
beforeCreate(){
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.msg)
console.log('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){//常用 创建完毕状态 完成了data数据的初始化 el没有
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.msg); //已被初始化
console.log("实例已经创建完成，并且已经进行数据观测和事件配置")
},
beforeMount(){ //挂载前状态 完成了el和data初始化
this.msg="112233";
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.msg); //已被初始化
console.log("模板编译之前，还没挂载");
},
mounted(){//常用 挂载结束状态 完成挂载
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.msg); //已被初始化
console.log("模板编译之后，已经挂载，此时才会有渲染页面，才能看到页面上数据的显示")
},
beforeUpdate(){ //更新前状态
console.group('------beforeUpdate 更新前状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.msg);
},
updated(){ //更新完成状态
console.group('------updated 更新完成状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.msg);
},
beforeDestroy(){ //销毁前状态
console.group('------beforeDestroy 销毁前状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.msg);
},
destroyed(){ //销毁完成状态
console.group('------destroyed 组件销毁完成状态------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.msg)
}
});
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>在控制台的console里面查看运行后的效果：
然后点击“更新数据”按钮，会看到input绑定的数据发生变化：
数据更新前：
数据更新后：
控制台显示的打印信息：
最后点击“销毁组件”按钮，查看控制台显示的打印信息：
这样，一个完整的Vue实例生命周期就结束了。
注意：Vue组件被销毁以后，这时如果在更新数据就不会有任何反应了，因为组件已经被销毁
到此这篇关于Vue生命周期的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3+Ant design 实现Select下拉框一键全选/清空功能
在做后台管理系统项目的时候,产品增加了一个在Select选择器中添加一键全选和清空的功能,他又不让在外部增加按钮,其实如果说在外部增加按钮实现全选或者清空的话,功能比较简单的,下面给大家分享Vue3+Ant design 实现Select下拉框一键全选/清空功能,需要的朋友可以参考下2024-05-05
下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
这篇文章主要介绍了详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue项目中使用lib-flexible解决移动端适配的问题解决
这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
Element DateTimePicker日期时间选择器的使用示例
这篇文章主要介绍了Element DateTimePicker日期时间选择器的使用示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了如何封装Vue Element的table表格组件，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-02-02
vue过滤器可以在不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理,下面这篇文章主要给大家介绍了关于Vue中过滤器必懂小知识的相关资料,需要的朋友可以参考下2021-10-10
vue3中的ref,toRef,toRefs三个的作用使用小结
Vue3中ref、reactive、toRef、toRefs都是与响应式数据相关的，就此做一份笔记作为区别，本文重点给大家讲解vue3中的ref，toRef，toRefs三个是干嘛的，有什么作用，感兴趣的朋友跟随小编一起看看吧2022-11-11
vue中Form 表单的 resetFields() 失效原因及问题解决
在Vue项目中,使用formRef.value.resetFields()方法重置表单时可能遇到不起作用的问题,下面就来介绍一下如何解决,感兴趣的可以了解一下2024-09-09
最新评论