vue生命周期

**对生命周期的理解
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中$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（）函数；
最后销毁成功。。
图片如下：