组件的生命周期与HOOKs

生命周期

包括什么？

组件从创建，挂载到更新再到销毁的过程。

每个生命周期包括两个钩子。

创建，挂载前，挂载后，更新前，更新完毕，卸载前，卸载后(vue3)

vue3的创建过程合在了setup内，因此没有两个钩子

对应的函数

1. onBeforeMount(()=>{}),参数为一个回调函数，在挂载前自动执行。
2. onMounted(()=>{}),参数为一个回调函数，在挂载后自动执行。
3. onBeforeUpdate(()=>{}),参数为一个回调函数，在更新前自动执行。
4. onUpdated(()=>{}),参数为一个回调函数，在更新后自动执行。
5. onBeforeUnmount(()=>{}),参数为一个回调函数，在卸载前自动执行。
6. onUnmounted(()=>{}),参数为一个回调函数，在卸载后自动执行。

Note：有父子组件时

先解析子组件再解析父组件。按顺序，当解析到子组件时，需要解析好子组件后才能够把父组件解析完成。

---

Hooks

hook有助于模块化的开发，便于封装和抽象

---

当在一个组件里面有很多的逻辑的时候：

<script setup>
	//功能1的data
	//功能2的data
	//......
	//功能1的method
	//功能2的method
	//.....
</script>

实际上我们可以将多个功能分开，放在一个hooks文件夹下，创建useFunction1.ts, useFunction2.ts等文件

在这些文件里分别导出对应的data和method即可，然后在vue组件中接收即可。