什么是生命周期?
- Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。
- 通俗说就是Vue实例从创建到销毁的过程,就是生命周期。
- 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例。
以下是一个官方的概念图 做了详细的标注
钩子列表
beforeCreate
(1)beforeCreate
- 官方描述:组件实例刚被创建,组件属性data、el等还未生效。
- el 和 data 并未初始化
- 注意:this变量还不能使用,在data下的数据,和methods下的方法都不能获得到;
created
(2)created
- 官方描述:实例已经创建完成之后被调用,然而,挂载阶段还没开始,$el 属性目前不可见。
- data已经初始化,但el并未初始化
- 完成了 data 数据的初始化,但el没有初始化,所以这个时候可以操作vue实例中的数据和各种方法,但是还不能对"dom"节点进行操作;
创建阶段
- 创建的标志点是New vue(),beforeCreate和created都发生在创建动作之后,但区别在于beforeCreate触发的时候数据还没初始化和绑定,而created的时候就生成好了,具体看看console的内容:
- 数据很明显,beforeCreate触发的时el、data都没初始化,但到created的时候虽然el依然没有初始化,但是data已经生成了,并且成功将message的值绑定上。
beforeMount
(3)beforeMount
- 官方描述:在挂载开始之前被调用,完成了 el 和 data 初始化。
- el 和 data 均已初始化 。
- 在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。
数据挂载方式
- 在实例化Vue的时候,两种方式挂载数据
方法1:最常用的方式
文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素
方法二:$mount
利用$mount挂载的方法有一个很大的好处,就是将实例化的内容和对应HTML的关联分开,可以更直观的展现。
mounted
(4)mounted
- 官方描述:模板挂载完毕,el 被新创建的 vm.$el 替换。
- 解释:挂载完毕,这时dom节点被渲染到文档内,一些需要dom的操作在此时才能正常进行
- 此时,beforeMount的虚拟DOM便被真正数据渲染了出来。
挂载阶段
- beforeMount和mounted两者主要区别在于模板是否编译和挂载了
①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了,但是只是占了坑,挂上了编译前的模板,即虚拟DOM技术(Virtual DOM)
beforeUpdate
beforeUpdate 数据更新之前
点击按钮
或者 在chrome控制台输入新数据
updated
updated数据更新之后
更新阶段
- 加载页面的时候,其实到mounted这里就结束了,更新和销毁并不会触发到。
- 这里另外写了一个方法去改变message的值,触发更新:
此后,每次更新数据都会触发该事件。
beforeDestroy
- beforeDestroy销毁前
destroyed
- destroyed销毁完毕
可以发现beforeDestory和destoryed打印出来的结果并没有什么特别,el的值data的数据依然在的。
这是因为$destroy只是销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom
销毁阶段
- 对 vue实例进行销毁。销毁完成后,再重新改变message的值,vue不再对此动作进行响应了。但原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。
- 此时页面数据便不再响应更新。
- DOM销毁–页面消失;Vue销毁–销毁绑定
生命周期小结
- Vue 组件的生命周期分为四个阶段,每个阶段有两个生命钩子,注意前后钩子。
- (1)创建阶段:主要用于组件创建时,获取数据设置组件。
beforeCreate组件实例刚被创建,组件属性data、el等还未生成
created(能够访问创建成功的组件实例,但不能访问 模板,el 或 DOM)
(2)挂载阶段:主要用于访问组件 DOM
beforeMount在挂载开始之前被调用,完成了 el 和 data 初始化
mounted(能够访问组件模板,模板挂载完毕,el 被新创建的 vm.$el 替换)
(3)更新阶段:数据变化,组件重新渲染。
beforeUpdate(能够访问组件更新后的数据,但无法访问 DOM)
updated(能够访问 DOM)
(4)销毁阶段:(用于销毁组件,做清理工作)
beforeDestory(销毁前还能访问组件实例)
destoryed销毁完毕,销毁实例,清理实例连接,解绑它的全部指令及事件监听器,并不会清除data的数据或者清除dom - 通俗来说 vue的生命周期就是vue实例从创建到销毁的过程,将这个过程中的一些关键点抽取出来,简化为下面这个流程图:
总结
(1)什么是生命周期?
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
(2)生命周期钩子选项/生命周期钩子?
就是生命周期事件的别名而已。
(3)生命周期钩子 = 生命周期函数 = 生命周期事件
(4)主要的生命周期函数分类:
①创建期间的生命周期函数
②运行期间的生命周期函数
③销毁期间的生命周期函数
(5)创建期间的生命周期函数:
①beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
②created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
③beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
④mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
(6)运行期间的生命周期函数:
①beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
②updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
(7)销毁期间的生命周期函数:
①beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
②destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
以下为源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
</style>
<script src="../vue10.9练习/js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="demo">
<p>{{name}}</p>
<button @click="destoryFn">按钮</button>
</div>
<script type="text/javascript">
/*1、创建根实例*/
var demo = new Vue({
/*2、挂载根实例到元素上*/
el:'#demo',
/*3、绑定数据*/
data:{
name:'熊大'
},
methods:{
destoryFn:function(){
demo.$destroy();
}
},
beforeCreate:function(){
console.group('---创建前---');
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---创建前---');
},
created:function(){
console.group('---创建完毕---');
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---创建完毕---');
},
beforeMount:function(){
console.group('---挂载前---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---挂载前---');
},
mounted:function(){
console.group('---挂载完毕---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---挂载完毕---');
},
beforeUpdate:function(){
console.group('---更新前---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---更新前---');
},
updated:function(){
console.group('---更新完毕---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---更新完毕---');
},
beforeDestroy:function(){
console.group('---销毁前---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---销毁前---');
},
destroyed:function(){
console.group('---销毁完毕---');
console.log(this.$el)
console.log("%c%s","color:red;","el:"+this.$el)
console.log("%c%s","color:red;","data:"+this.$data)
console.log("%c%s","color:red;","name:"+this.name)
console.groupEnd('---销毁完毕---');
}
})
</script>
</body>
</html>