VUE生命周期全面系统详解

beforeCreate() {
			// 创建前,有this,没有data,methods,dom节点
			console.log("beforeCreate",this.num ,this)
		},

created() {
			// 创建完毕,有data,没有el
			console.log("created",this.num ,this.$el)
			// 作用发起ajax请求,开启定时器,监听事件(window)
			// 开启定时器
			this.stopId = setInterval(() => {
				this.num++;
				console.log("滴答")
			}, 1000)
			// 监听事件
			window.addEventListener("resize",this.showWin)
		},

		beforeMount() {
			// dom挂载前,有el,没有渲染数据
			// beforeMount 访问&el 为什么是 undefined
			// 因为使用的脚手架,动态更新造成的(在非脚手架状态下可以)
			console.log("beforeMount", this, document.querySelector("#btn"))
		},

		mounted() {
			// 挂载完毕
			console.log("*mounted", this, document.querySelector("#btn"))
			// this 当前组件的实例
			// this.$el 当前组件的dom节点
			// this.num当前组件的 属性
			// console.log(this,this.$el,"组件的实例this",this.num)
			// 作用:作用发起ajax请求,开启定时器,监听事件,操作dom节点
		},

		// 更新前后
		beforeUpdate() {
			// 组件的更新前,数据更新,视图没有更新
			console.log("beforeUpdate", this.num, document.querySelector("#btn").innerText)
		},

		updated() {
			// 组件更新后,数据更新,视图已经更新
			console.log("updated", this.num, document.querySelector("#btn").innerText)
		},

		// 卸载前后
		beforeDestroy() {
			// 结束定时器
			clearInterval(this.stopId);
			//移除事件监听
			window.removeEventListener("resize", this.showWin)
			// 数据可以更新,视图已经不响应
			// this.num++;
			// console.log( "卸载前","beforeDestroy")
			// alert("卸载前")
		},

		destroyed() {
			// 切断视图与vue实例的联系
			// this.num++;
			console.log("卸载后", "destroyed")
		}