vue的生命周期函数

1. VUE的生命周期函数表示vue在实例化到销毁过程自动执行的函数

2.第一个生命周期函数beforeCreate,表示vue实例在完全创建之前自动执行的函数，这时data和methods还没有初始化

<div id="app">	
	<div id="name">{{name}}</div>
	<input type="button"  @click="changeName" value="change"/>		
</div>
	<script>
		var vm=new Vue({
			el:"#app",
			data:{
				name:"张三"
			},
			methods:{
				click(){
					console.log("click")
				},
				changeName(){
					this.name="李四"
				}
			},
			beforeCreate(){
				console.log("beforeCreate")//打印beforeCreate
//调用这个方法的时候，出现报错，不存在这个方法，因为methods还没有初始化
				  this.click() 
//调用这个数据的时候，打印输出显示name这个数据没有定义，因为data还没有初始化
				console.log(this.name)
			}
	</script>
				

3.第二个生命周期函数created(),是在data和methods已经初始化后自动调用，
如果想操作data数据和methods里的方法最好在这个时候

			beforeCreate(){
				console.log("beforeCreate")//打印beforeCreate
			},
			created(){
					console.log("created")//打印输出created
					this.click()//打印输出click
					console.log(this.name)//打印输出张三
			}
	</script>

4.第三个生命周期函数beforeMount()表示模板数据已经在内存编译好了，还没有渲染到页面中去

			beforeCreate(){
				console.log("beforeCreate")//打印beforeCreate
			},
			created(){
					console.log("created")//打印输出created
					this.click()//打印输出click
					console.log(this.name)//打印输出张三
			},
			beforeMount(){
				console.log("beforemount")//打印beformount
				this.click()//打印输出click
				console.log(this.name)//打印输出张三
				//打印{{name}}，这说明数据还没有渲染到页面中去
				console.log(document.getElementById("name").innerHTML)
			}
	</script>

5.第四个生命周期函数Mount()表示模板数据已经在内存编译好了，而且数据已经渲染到页面中去了，这时候vue实例化完毕了，这是vue最后一个实例化的函数

			mounted(){
				console.log("mounted")//打印mounted
				//打印张三，这说明数据已经渲染到页面中去了
				console.log(document.getElementById("name").innerHTML)
			}
	</script>

6.第五个生命周期函数， beforeDestroy()表示页面数据还没有被更新但是data里的数据集已经被更新

	
			beforeUpdate(){
				//当点击changeName按钮的时候，改变name数据
				console.log("beforeUpdate")//打印beforeUpdate
				//打印输出李四，说明data的数据更新了
				console.log(this.name)
			
				//打印输出张三，这说明更新的数据还没有渲染到页面中去
				console.log(document.getElementById("name").innerHTML)
				
			}		
				
	</script>

7.第六个生命周期函数updated()表示改变数据的时候data的数据改变了而且已经更新的数据渲染到页面中去了

		updated(){
		//当点击changeName按钮的时候，改变name数据
			console.log("updated")//打印输出updated
			console.log(this.name)//打印李四
		//打印输出李四，这说明数据渲染到页面了
			console.log(document.getElementById("name").innerHTML)
					
		}
	</script>

8.第七个生命周期函数beforeDestroy()表示vue实例进入销毁阶段，但这是的data和methods等数据还能用

9.第八个生命周期destroyed()表示vue实例已经完全销毁，data等的数据已经不能使用了