vue生命周期函数

在vue中，共有8种生命周期函数

• beforeCreate() —— 实例创建前
• created() —— 实例创建完成
• beforeMount() —— 模板渲染之前
• mounted() —— 模板渲染完成
• beforeUpdate() —— 数据更新之前
• updated() —— 数据更新完成
• beforeDestroy() —— 实例销毁之前
• destroyed() —— 实例销毁完成

在代码中，生命周期函数与data、method是同一级别的

export default {
		data(){
			return{
				msg: '生命周期函数'
			}
		},
		methods:{
			
		},
		beforeCreate(){
			console.log("实例创建前");
		},
		created(){
			console.log("实例创建完成");
		},
		beforeMount(){
			console.log("模板渲染之前");
		},
		mounted(){  //一般请求数据、操作DOM放在这里
			console.log("模板渲染完成");
		},
		beforeUpdate(){
			console.log("数据更新之前");
		},
		updated(){
			console.log("数据更新完成");
		},
		beforeDestroy(){  //页面销毁的时候保存一些数据，可以实现监听这个销毁函数
			console.log("实例销毁之前");
		},
		destroyed(){
			console.log("实例销毁完成");
		}
	}

在一个页面加载完成时，已经执行了前四个生命周期函数，在控制台打印如下

• 创建前/后：在beforeCreate阶段，实例el元素还没有进行挂载
• 渲染前/后：在beforeMount阶段，$el和data开始初始化，在mounted阶段，vue实例挂载完成，模板渲染完成
• 更新前/后：data中的数据发生变化时，触发beforeUpdate和updated方法
• 销毁前/后：执行destory方法后，改变data不会再触发周期函数，vue实例解除了事件监听和DOM的绑定，但是DOM结构依然存在

在生命周期函数内部，可以自定义你所需要实现的功能