Vue的生命周期

2023-09-24 11:06:09

Vue的生命周期

vue实例从创建到销毁的过程，就是生命周期。vue每个组件都是独立的，每个组件都有一个属于它的生命周期。生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段：挂载阶段、更新阶段、销毁阶段。

beforeCreate:创建前

实例初始化之后，此时组件的选项对象还未创建，el,data并未初始化，因此无法访问methods,data,computed等上的数据和方法。

data() {
	return {
		num:1
	}
}
beforeCreate(){
	console.log(this.num);  // undefined
},

created:创建后

实例已经创建完成之后被调用，完成了data 数据的初始化，但是$el没有

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
created() {
	console.log(this.num)	// num
	console.log(this.$refs.span)	// undefined 访问不到dom节点
}

但是如果我们想在created里面获取到dom节点，该怎么办？
我们可以使用vue.js给我们提供的$nextTick方法：

created(){
  this.$nextTick(()=>{
    console.log(this.$refs.span);
  })
  console.log(this.$refs.span);	
}

this.$nextTick(()=>{})将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

beforeMount:载入前

挂载之前调用，完成了el和data初始化,注意此时还不能访问dom节点

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
beforeMount() {
  console.log(this.num);  // 1
  console.log(this.$refs.span);  // undefined 
},

mounted:载入后

挂载完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

<span ref="span">{{num}}</span>
data() {
	return {
		num:1
	}
},
mounted(){
  console.log(this.num);  // 1
  console.log(this.$refs.span);  // <span>1</span>
}

beforeUpdate:更新前 / updated:更新后

beforeUpdate:在数据更新之前被调用，发生在虚拟DOM重新渲染和打补丁之前。
注意：一定是应用到页面中数据改变才会触发beforeUpdate和updated钩子函数
下面data中msg发生变化，但是页面中没有应用到它，所以不会触发两个钩子函数

<span ref="span">{{num}}</span>
<button @click="msg = 'uu'">改变msg</button>
data() {
	return {
		num:1,
		msg:'你好'
	}
},
beforeUpdate(){	// 不会触发
  console.log(this.msg);
  console.log(this.$refs.span);
},
updated() {		// 不会触发
  console.log(this.msg);
  console.log(this.$refs.span);
},

beforeUpdate和updated区别：

<span ref="span">{{num}}</span>
<button @click="msg = 'uu'" class="button">改变{{msg}}</button>
data() {
	return {
		num:1,
		msg:'你好'
	}
},
指的是数据变了视图还未更新的时候会调用
beforeUpdate(){
  console.log(this.msg);
  let button = document.querySelector('.button')
  console.log(button.innerHTML);
},
更新之后 数据和视图保持一致
updated() {
  console.log(this.msg);
  let button = document.querySelector('.button')
  console.log(button.innerHTML);
},

我们可以看出在updated钩子函数中，数据才和视图保持一致。

beforeDestroy:销毁前

在实例销毁之前调用，实例仍然完全可用，一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件
在销毁之前还可以访问到DOM结构以及data中相关的数据,

destroyed:销毁后

所有的事件监听器会被移出，所有的子实例也会被销毁。
还是可以访问到data中的属性,但访问不到DOM结构了

<span ref="span">{{num}}</span>
<button @click="$router.push('/about')">go</button>
data() {
	return {
		num:1
	}
},
beforeDestroy(){
  console.log(this.num);	// 1
  console.log(this.$refs.span);	// <span>1</span>
},
destroyed() {
  console.log(this.num);	// 1
  console.log(this.$refs.span);	// undefined
}

码农公寓