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的生命周期
目录 1.什么是生命周期?有什么作用? 2.第一次加载页面会触发哪几个钩子? 3.简述每个周期应用于哪个场景? 4.created和mounted的区别 5.vue在哪个生命周期获取数据? 总结 1.什么是生命周期?有什么作用? 每一个vue实例在创建时都要经历一系列的初始化过程-----例如需要设置监听,编译模板,将实例挂载到dom并在数据发生变化时更新dom等等.同时这个时候也会运行一些生命周期钩子的函数,这些函数,给用户在不同阶段添加代码的机会.例如:如果需要某些插件操作dom节点,如果想
-
详细聊聊Vue生命周期的那些事
目录 前言 一.Vue2中的生命周期 实例的生命周期 其它生命周期钩子 二.Vue3中的生命周期 Options API生命周期 Composition API生命周期 两个新的Vue3生命周期函数 最后 前言 如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~ 一.Vue2中的生命周期 实例的生命周期 在介绍生命周期之前,我们需要知道在Vue中要渲染
-
Vue 生命周期和数据共享详解
目录 1.组件的生命周期 1.1生命周期与生命周期函数 1.2组件生命周期函数的分类 1.3生命周期图示以及详解 2.组件之间的数据共享 2.1组件之间的关系 2.2父向子传值 2.3子向父传值 2.4兄弟之间的数据关系 总结 1. 组件的生命周期 1.1 生命周期与生命周期函数 生命周期是指一个组件从 创建 => 运行 => 销毁 的整个时间段,强调的是一个时间段.生命周期函数是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行. 1.2 组件生命周期函数的分类 1.3
-
Vue之生命周期函数详解
目录 生命周期函数 常用的生命周期的钩子 关于Vue销毁实例: 总结 生命周期函数 生命周期函数又叫:生命周期回调函数,生命周期函数. 生命周期钩子 是什么:Vue在关键时刻帮我们调用一些特殊名称的函数 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的 生命周期函数中的this指向的是vm或者组件实例化对象 常用的生命周期的钩子 1.mounted:发送ajax请求,启动定时器,绑定自定义事件 订阅消息等功能[初始化操作] 2.beforeDestory:清除定时器,解绑自定义
-
一起来学习Vue的生命周期
目录 生命周期 生命周期的简单介绍 beforeCreate与created beforeCreate() created() beforeMount与mounted beforeMount() mounted()(重要) beforeUpdate与updated beforeUpdate() updated() beforeDestroy与destroyed beforeDestroy()(重要) destroyed() 总结 生命周期 生命周期的简单介绍 1.生命周期又叫做:生命周期回调函数
-
老生常谈vue的生命周期
目录 一.什么是生命周期 二.生命周期函数 三.生命周期的流程 四.简单的生命周期代码 总结 一.什么是生命周期 每一个组件都可能经历从创建,挂载,更新,卸载的过程. 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的逻辑代码(比如组件创建完后就请求一些服务器数据) 但是我们如何知道目前组件正在哪一个过程中,vue给我们提供了组件的生命周期函数. 二.生命周期函数 生命周期函数是一个钩子函数,在某一个时间会被vue内部源码进行回调. 通过对生命周期函数的回调,我们知道目前组件正在经历什么
-
梳理一下vue中的生命周期
什么是生命周期? 生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程! 以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期! vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下v
-
Vue的生命周期一起来看看
目录 1.生命周期(重要) 1.1初步认识生命周期 1.2生命周期流程(8个) 1.3生命周期详细流程图 1.4常用的生命周期钩子: 1.4.1关于销毁 1.4.2关于父子组件的生命周期 1.5小案例 1.6代码举例说明生命周期钩子 总结 1. 生命周期(重要) 1.1 初步认识生命周期 别名:生命周期回调函数.生命周期函数.生命周期钩子. 生命周期是什么?Vue在关键时刻帮我们调用的一些特殊名称的函数. 生命周期函数的名字不可更改,但函数内部的具体内容由程序员自行编写 生命周期函数中的this
-
详解vue生命周期
目录 为什么要理解生命周期 什么是生命周期 生命周期钩子函数 created和mounted 钩子的一些实战用法 1.异步函数 2.Vue.nextTick对异步函数的结果进行操作 总结 为什么要理解生命周期 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 如果只是单纯地知道vue里面的简单语法,你是可以实现对应的一些项目和对应的想法,但是如果一旦发生问题,我们就需要借助生命周期去寻找问题,甚至说有一些需求的话,你也通过生命周期的情况来定我们该把这个东西写在哪里.所以理解vue的生命周期还
-
Vue生命周期中的组件化你知道吗
目录 引出生命周期 销毁流程 生命周期 生命周期总结 组件化 非单文件组件 组件的几个注意点 组件的嵌套 VueComponent Vue实例与组件实例 总结 引出生命周期 此时调用change,定时器回调修改opacity,数据修改,模板重新解析,再次调用change. 销毁流程 解绑(自定义)事件监听器 生命周期 生命周期总结 <div id="root"> <!-- <h2 :style="{opacity}">hello,{{n