Vue生命周期钩子函数以及实例上的属性和方法简单总结

前端小白简单总结，还望各位大佬多多指教~

Vue生命周期钩子函数

大致分为三个阶段：

1、初始化阶段：

• beforeCreate（组件创建前）：data和methods中的数据还未被初始化 —— 一般用不到

• created（组件创建结束）：data和methods中的数据已经完成初始化 —— 获取ajax，初始化操作

• beforeMount（组件挂载前）：模板编译完成，但还未渲染挂载到页面

• mounted（组件挂载结束）：真实dom渲染完成，挂载到页面，可以操作dom了

2、运行阶段：

触发条件：当数据发生变化时

• beforeUpdate（页面更新前）：数据已更新，页面中的数据还未更新 —— 一般用watch来替换

• updated（页面更新结束）：页面也完成更新，和数据保持一致

3、销毁阶段：

触发条件：当组件销毁时

• beforeDestroy（组件销毁前）：data、methods、指令、过滤器等都还可以正常使用，未执行销毁

• destroyed（组件销毁结束）：data、methods、指令、过滤器等都已经不可用

图片来自黑马前端教程

vm实例上的属性和方法

• this.$data：vm上的数据
• this.$watch：监控
• this.$el：当前el元素
• this.$set：后加的属性实现响应式变化
• this.$option：vm上的所有属性
• this.$refs: dom元素通过v-for循环出来的可以获取多个，是数组形式； 不是通过v-for循环出来的，只能获取一个，相当于原生js中的id，vue中使用$refs更为优雅
• this.$nextTick(( )=>{ // 异步方法，等待dom渲染完成后再获取vm })$nextTick括号中的自执行函数是在dom渲染完成后执行的 dom渲染是异步的，如果数据变化后想立即获取真实dom中的最新内容，需要等待页面渲染完成后才能去获取，因此所有的操作dom方法最好放在nextTick中，mounted中常用。 例如：

<div id="app">
	<div ref="wrap">
		<div v-for="a in arr" ref="mydiv"></div>
	</div>
</div>
<script>
let vm = new Vue({
	el: '#app',
	data: {
	arr: [1, 2, 3]
},
mounted(){
	console.log(this.$refs.mydiv) // [div, div, div]
	this.arr = [1, 2, 3, 4];
	console.log(this.$refs.wrap) // [1, 2, 3]
	this.nextTick(() => {
		console.log(this.$refs.wrap); // [1, 2, 3, 4]
	})
}
})
</script>