首先大家需要知道什么叫做生命周期,生命周期指的是:Vue实例化创建到销毁的整个过程
了解Vue生命周期首先看一下Vue官方给的生命周期的图吧!
单词不会建议大家下载一个有道词典,重点查一下那些红框内的单词!
看完这张图,是不是感觉若有所思,分析一下:
首先图片最清晰的就是红框里的单词,这8个状态正式Vue内部从创建到销毁的整个过程,
如果你刚接触Vue肯定会有一个疑问!!!
<div id="app">
{{name}}
</div>
let app = new Vue({
el:"#app",
data:{
message:"你好vue"
}
})
在控制台如果获取
[图片上传失败...(image-66f516-1605846261607)]
会发现 app.message 就能得到message的数据 会不会有疑问 会不会感觉白学了?
其实这是Vue内部做的一些处理,应该是用app.data.message才获取到的现在使用app.message 就可以了
因为我们使用data内的数据比较多 所以Vue开发人员做了优化,方便开发。
当然如果你想通过data的方式获取到message 现在需要在data前加一个 data.message 能拿到message的值
[图片上传失败...(image-e07a14-1605846261607)]
1.boforeCreated()
指的是创建之前,我们用代码来看看创建之前都做了什么事吧~
结果发现:
[图片上传失败...(image-485b3f-1605846261607)]
全都是undefined
说明创建之前Vue在做准备工作,并没有赋值!
2.created() 创建完成
[图片上传失败...(image-626fc9-1605846261607)]
会发现 $el还没有挂载上 依旧是undefined
3.beforeMount() 挂载之前
结果发现:
注意看画红圈的地方,此时的指令还没有解析但是$el不是undefined了。
4.mounted() 挂载完成
结果发现
这个时候$el才是真正被挂载上了,并且指令也解析完成了!!!
5.beforeUpdated()
这个方法的触发需要借助于原生JS来实现
我们可以添加一个按钮,按钮的功能是 更改name的值
[图片上传失败...(image-6bf8cb-1605846261607)]
!!!!!!!!会发现:!!!!!!!!!!!!!
[图片上传失败...(image-36bda6-1605846261607)]
更新之前的的name已经变成了 K ??????
这是为什么呢?
原来是:beforeupdate是针对视图层,视图层的数据发生改变才会触发。
6. updated()
[图片上传失败...(image-37ff9e-1605846261607)]
结果和beforeUpdate()没什么区别
7.beforeDestroy() 摧毁之前
这个方法的触发需要借助原生js
[图片上传失败...(image-88471b-1605846261607)]
使用的是 $destroy()方法进行销毁
[图片上传失败...(image-d244e4-1605846261607)]
点击摧毁按钮
[图片上传失败...(image-fc36d5-1605846261607)]
8.destroyed()
[图片上传失败...(image-c3b96e-1605846261607)]
[图片上传失败...(image-22b681-1605846261607)]
了解一下 mounted(挂载)的使用
[图片上传失败...(image-caf648-1605846261607)]
[图片上传失败...(image-72a991-1605846261607)]
打开页面会发现 没有挂载
点击挂载后
使用的也是原生JS
是 $mount()方法 参数一个 是需要挂载的id