**对生命周期的理解
1.生命周期是指一个vue实例从创建到销毁的一个过程;
2.在整个生命周期的过程当中,会有函数在特定时间内被自动的进行调用,这些函数叫做生命周期函数。常见的生命周期函数包括下面的8大部分,分别是:
- beforecreate
- created
- beforeMount
- Mounted
- beforeUpdate
- Updated
- beforeDestory
- Destoryed
3.这些生命周期在什么时候会被调用以及在调用的时候干了什么工作,有什么相同的地方和不同的地方呢?
1. create相关函数
beforecreate和created在创建的时候只会被调用一次;
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210718154749160.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTIxNzIwMA==,size_16,color_FFFFFF,t_70)
这样不难看出,在beforecreate中
d
a
t
a
是
u
n
d
e
r
f
i
n
e
d
,
而
c
r
e
a
t
e
d
中
的
data是underfined,而created中的
data是underfined,而created中的data是有值的。
而$data指的是vue实例中data的代理,在created()函数中,可以通过this来访问data中的内容;
## 因此,得出了一个重要的结论,就是:
如果要处理跟数据相关的逻辑,最早在created()函数中进行处理;
## 一句话总结就是:
created()函数完成了data(状态)中数据的初始化,是可以访问data里面的数据内容的;
在beforecreate()是不可以进行访问data里面的数据的;
场景
- 如果发送ajax请求从后台 拿数据,建议放到created()中;
- 如果要完成data数据的初始化,建议放到created中
2.Mount(挂载)相关函数
- beforeMount()
- Mounted()
create和mount的不同
created结束时还不能操作DOM,mounted结束时才可以操作DOM
示例
$el代表的是dom,是一个虚拟的DOM,但是会被翻译成真正的DOM
el:'#app',
data:{
msg:"hello world"
},
temlate:'<div>{{msg}}</div>',
created(){
//跟数据相关的内容,就放在created()
console.log(this.$data)
console.log(this.$el,'created')//undefined
},
beforeMount(){
console.log(this.$el,'beforeMount')//<div id = #app></div>
},
Mounted(){
//跟dom操作相关的,就放在mounted()中
//挂载完成之后,放的是编译好的模板里面的内容,替换掉了原有的el所指定的内容
console.log(this.$el,'Mounted')//<div>hello</div>
}
总结:
created()和mounted()不同之处就是created()只可以访问data里面的数据,不能操作DOM;而mounted()函数可以操作DOM,并可以把原有的模板(DOM)替换掉
知识点:
//当把el注释的话,或者不指定el选项的话,mounted()和beforeMount()函数不进行执行,想使挂载函数运行,就可以手动调用$mount()方法
vm.$mount()
如果要把template挂载在指定的地方,就可以这样:
vm.$mount('#app')//这样可以把编译好的模板对#app
下的div进行替换
mount是把什么挂载到什么上
当执行完成 mounted()后,将编辑好的模板挂载到了html中,替换掉原来的所有的节点,而原有的节点是通过el来进行指定的
通过上面的分析,vue实例化过程中最重要的两步是:
- 编译
- 挂载
mounted()和beforeMount()不同点
在这之前,我们需要知道在beforeMount和mounted之间,做了什么事情
beforeMount(){
console.log(this.$el,'beforeMount')//<div id = #app></div>
},
//render函数是用来编译模板的,在挂载函数中间会调用这个函数,如果写了的话,在return中写入的内容会把template内容替换掉
render(h){
console.log('render is invoked')
return h('div',{} , this.msg)//生成一个<div>hello world </div>模板,会替换掉el指定模板里面的内容
},
mounted(){
console.log(this.$el,'mounted')
},
总结:
在beforeMount和mounted之间,调用了render方法,将模板编译成了html
3.Update相关函数
在页面中,改变元数据data中的数据时,并且导致页面重新渲染时,就会进入update周期;
数据更新发生前,会执行beforeUpdate();
当实时的数据进行变化时,会执行Update();
4.Destroy相关函数
当数据进行销毁时,销毁前要执行beforeDestory()函数;
当正在发生销毁实例中,要执行Destory()函数;
最后销毁成功。。
图片如下: