vue生命周期的简单了解

代码实践：

<div id="root"></div>

<script>
		//生命周期：在某一時刻會自動執行的函数
		//进入页面默认会自动执行inti->beforeCreate -> created -> beforeMount -> mounted
		const app = Vue.createApp({
			data() {
				return {
					msg: "vue生命周期"
				}
			},
			//在实例生成之前自动执行的函数，在执行该函数时，$el、$data、methods、computed在this中“无法获取”,data 和 methods 中的 数据都还没有初始化
			beforeCreate() {
				console.log("beforeCreate")
			},
			//在实例生成之后自动执行的函数，在执行该函数时，$data、methods、computed在this中【可以】获取（Tip：如果我们不用操作DOM可以发起网络请求）,data 和 methods 都已经被初始化好了
			//如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
			//因为会先执行完生命周期的钩子函数之后，才会执行异步函数,
			//考虑用户体验方面的话，在created中调用异步请求最佳，用户就越早感知页面的已加载，毕竟越早获取数据，在mounted实例挂载的时候就越及时
			created() {
				console.log("created")
			},
			//在组件内容被渲染到页面之前自动执行的函数，此时获取不到dom树内容,
			//模板已经在内存中编辑完成了,但是尚未把模板渲染到 页面中
			beforeMount() {
				console.log("beforeMount", document.getElementById("root").innerHTML) //输出：beforeMount，此时dom树还没有渲染到页面
			},
			//在组件内容被渲染到页面之后自动执行的函数，此时可以获取dom树内容
			mounted() {
				console.log("mounted", document.getElementById("root").innerHTML) //输出：mounted <div>vue生命周期</div>
			},
			//当数据发生变化时会立即自动执行的函数
			beforeUpdate() {
				//通过vm.$data.msg="123",修改data数据，
				console.log("beforeUpdate", document.getElementById("root").innerHTML) //输出：beforeUpdate <div>vue生命周期</div>，此时获取的dom是数据重新渲染之前的旧dom
			},
			//当数据发生变化，页面重新渲染后，会自动执行的函数
			updated() {
				console.log("updated", document.getElementById("root").innerHTML) //输出：updated <div>123</div>，此时获取的dom是数据重新渲染后的dom
			},
			//当vue应用失效时，自动执行的函数，此时还可获取dom树
			beforeUnmount() {
				//通过app.unmount()注销页面
				console.log("beforeUnmount", document.getElementById("root").innerHTML) //输出：beforeUnmount <div>vue生命周期</div>，此时还可以获取dom树
			},
			//当vue应用失效时，且dom完全销毁之后，自动执行的函数
			unmounted() {
				console.log("unmounted", document.getElementById("root").innerHTML) //输出：unmounted ，此时dom已经完全销毁
			},
			template: "<div>{{msg}}</div>"
		});
		const vm = app.mount("#root");
	</script>

beforeCreate

在实例生成之前自动执行的函数，在执行该函数时，$el、$data、methods、computed在this中“无法获取”,data 和 methods 中的 数据都还没有初始化

created

在实例生成之后自动执行的函数，在执行该函数时，$data、methods、computed在this中【可以】获取（Tip：如果我们不用操作DOM可以发起网络请求）,data 和 methods 都已经被初始化好了
如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
因为会先执行完生命周期的钩子函数之后，才会执行异步函数,
考虑用户体验方面的话，在created中调用异步请求最佳，用户就越早感知页面的已加载，毕竟越早获取数据，在mounted实例挂载的时候就越及时
最常用的是在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求,能更快获取到服务端数据，减少页面 loading 时间

beforeMount

//在组件内容被渲染到页面之前自动执行的函数，此时获取不到dom树内容,
//模板已经在内存中编辑完成了,但是尚未把模板渲染到 页面中

mounted

//在组件内容被渲染到页面之后自动执行的函数，此时可以获取dom树内容

beforeUpdate

当数据发生变化时会立即自动执行的函数

updated

当数据发生变化，页面重新渲染后，会自动执行的函数

beforeUnmount==beforeDestroy

当vue应用失效时，自动执行的函数，此时还可获取dom树

unmounted

当vue应用失效时，且dom完全销毁之后，自动执行的函数，此时已经不存在dom树