vue生命周期

Vue生命周期

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

Vue生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期函数=生命周期事件=生命周期钩子

Vue生命周期

	<script>
		const vm = new Vue({
     

			data: {
     
				msg: "花有重开日",
				num: 5
			},
			methods: {
     
			},
			// 拿不到data和methods的数据方法，一般用于 重定向
			beforeCreate() {
     
				console.log("beforeCreate");
				console.log(this);
				console.log(this.msg);
			},
			// Vue实例创建完毕，能拿到data和methods的数据方法，一般用于 接口请求和 数据初始化
			created() {
     
				console.log("created");
				console.log(this.msg);
			},
			// dom元素渲染前 此时页面数据尚未加载，虚拟dom存到内存中
			beforeMount() {
     
				console.log("beforeMount");
			},
			// dom元素渲染完毕，挂载到页面中一些依靠dom的操作在此进行 swiper初始化 echarts初始化, 解析模板，绑定数据和事件
			mounted() {
     
				console.log("mounted");
			},
			// 页面元素更新前  执行0次或多次
			beforeUpdate() {
     
				console.log("beforeUpdate");
				console.log(this.msg);
				// this.num++
				setInterval(() => {
     
					this.num++
				}, 1000)
			},

			// 页面元素更新后 执行零次或多次
			updated() {
     
				console.log("updated");
				console.log(this.msg);
			},
			// 销毁前 一般用于清除计时器  属性监听  事件监听
			beforeDestroy() {
     
				console.log(1111);

			},
			destroyed() {
     
				console.log(222);
			},

		})
    	// 绑定到id是app的dom元素
		vm.$mount("#app")
	</script>