vue生命周期说明

<template>
	<div>
		<h3 ref="life">生命周期</h3>
		<h3 ref="life2">生命周期</h3>
		<h3 ref="life3">生命周期</h3>
		<h3 ref="life4">生命周期</h3>
		<button @click="getDom">获取元素</button>
		<button @click="changeA">修改a</button>
		{{a}}
	</div>
</template>

<script>
export default{
	name: 'Life',
	data(){
		return{
			a:10
		}
	},
	methods:{
		fn(){
			console.log('fn')
		},
		changeA(){
			this.a = 100
			console.log(this.a)
		},
		getDom(){
			console.log(this.$refs)
			// $refs 对象 是Vue实例中的一个属性
			// 属性值是一个对象 
			// 对象中 保存的是设置了ref属性的元素
			// 属性名是 ref的属性值 
			// 属性值是 对应的Dom元素
			// vue中获取元素 就是this.$refs.[ref属性值]
			console.log(this.$refs.life2)
		}
	},
	beforeCreate() {
		// 实例化之后的第一个生命周期钩子函数
		// 在这个时间点 数据，方法都没有创建出来，dom结构也没有渲染出来
		console.log('beforeCreate')
		console.log(this.a) // undefined 数据没有创建
		// this.fn() // 报错 this.fn 不是方法
		console.log(this.$refs.life) // undefined dom结构没有渲染
		console.log('--------------')
		// 作用: 这个时间点虽然数据，方法，dom都不存在，但是vue对象已经实例化出来了
		//       有些需求不许等到实例之后在执行，就可以用这个钩子函数
		//       一些插件的初始化，也可以在这个钩子函数中执行
	},
	created() {
		// 在这个时间点 数据，方法已经创建好，但是dom结构没有渲染
		console.log('created')
		console.log(this.a) // 10
		this.fn() // 正常执行
		console.log(this.$refs.life) // undefined dom结构没有渲染
		console.log('--------------')
		// 作用: 数据已经创建好，所以此时可以完成数据的相关操作
		//      组件中的数据，数据名更重要，因为数据的值大部分是从后台请求的
		//      在这个钩子函数中，我们需要去后台请求数据，并且把请求到的数据
		//      赋值给本地对应的数据名
	},
	beforeMount() {
		// 在这个时间点 数据，方法已经创建好，但是dom结构没有渲染
		console.log('beforeMount')
		console.log(this.a) // 10
		this.fn() // 正常执行
		console.log(this.$refs.life) // undefined dom结构没有渲染
		console.log('--------------')
		// 作用: 基本没有
	},
	mounted() {
		// 在这个时间点 数据，方法已经创建好，dom结构渲染完成
		console.log('mounted')
		console.log(this.a) // 10
		this.fn() // 正常执行
		console.log(this.$refs.life) // dom结构获取成功
		console.log('--------------')
		// 作用: 进行数据与dom元素的联合操作
		//       数据相关操作
	},
	// 更新
	// 页面必须重新渲染，才会触发这个两个钩子函数
	beforeUpdate() {
		console.log('beforeUpdate')
	},
	updated(){
		console.log('updated')
	}
	// 做一些样式上的变换测量
	// 比如滚动条滚动了多少等
}
</script>

<style>
</style>