生命周期方法是任何Vue.js应用程序的一个重要组成部分。它们让你能够在组件的生命周期中的特定点执行某些动作。Mounted 方法是最常用的方法之一，它允许你在组件被创建时运行一个函数。
在这篇文章中，我们将讨论Vue.js中的Mounted 生命周期挂钩。我们将看到它的用途，以及我们如何在我们的应用程序中利用它，以便在我们的应用程序首次创建时调用一个函数。
在本文结束时，你应该对Mounted方法有一个很好的理解，以及何时和如何使用它。
什么是Vue中的生命周期方法？
生命周期方法是你可以选择在组件的生命周期中的特定时刻运行的函数。它们与React Hooks非常相似，所以如果你熟悉那个库，你可能就不会有任何问题。
有许多不同的方法，每个方法都被设计成在流程中的不同点上运行。
它们是Vue.js的内置功能，让你对你的代码何时运行一个特定的功能有很大的控制。下面是8个生命周期方法的顺序：
- 创建前
- 创建前
- 挂载前
- 挂载
- 更新前
- 已更新
- 销毁前
- 已销毁
从技术上讲，我们可以使用前四种中的任何一种，以便在一个组件被创建后立即运行我们的一个函数。然而，在大多数情况下，我们最终会使用Mounted 函数，因为它是一个惯例。
那么，什么是挂接钩呢？
Mounted钩子是我们可以在Vue.js中使用的生命周期钩子之一。它在实例被加载后被调用，这意味着所有的子组件也被加载。这是一个很好的地方，可以执行任何需要在组件被渲染后发生的操作，比如获取数据或调用API。
出于这个原因，它经常被用来在组件创建后立即调用一个函数。
我们如何使用Mounted钩子？
为了使用挂载钩子，我们只需要定义一个我们想要运行的函数，然后指定这个函数应该在 "挂载"生命周期钩子中被调用。这里有一个非常简单的例子，当我们装载我们的组件时，它将记录 "Hello world!"的信息：
<script>
export default {
mounted() {
console.log("Hello World!");
},
};
</script>
一旦我们定义了我们的函数，我们就可以在其中添加我们想要运行的代码。例如，如果我们想从一个API端点获取一些数据，我们可以这样做：
<script>
export default {
methods: {
async getData() {
const res = await fetch("https://myapi.com");
const finalRes = await res.json();
},
},
mounted() {
this.getData();
},
};
</script>
通过使用上面的代码，我们函数里面的任务将在组件被安装后执行。这意味着，在我们的代码运行之前，所有的子组件也将被挂载。
如果你试图从你的函数内部访问一个子组件，这一点很重要，你可能需要确保子组件首先完成挂载，这也是我们使用Mounted 方法而不是像Before Create这样早期方法的原因之一。
我们是否需要使用Composition API的Mounted方法？
如果你使用新的Composition API来运行你的应用程序，你实际上不需要做任何特别的事情来在组件第一次被渲染时调用一个函数。你可以只写这样的东西：
<script setup>
function sayHi() {
console.log("Hello World!");
}
sayHi();
</script>
然而，如果你想完全控制你的代码，你能够调用一个生命周期方法，并在其中添加任何你想要的代码作为回调，像这样：
<script setup>
import { onMounted } from "vue";
onMounted(() => {
console.log("Hello World!");
});
</script>
注意这个方法的名字略有不同，但它的工作原理仍然与选项API完全相同。
无论如何，Vue.js中的Mounted 钩子允许我们在我们的组件被完全渲染和所有子组件被安装后运行代码。这对于获取数据或其他需要在组件渲染后进行的操作来说非常有用。所以，如果你想在组件创建时调用一个函数，这可能是你需要的工具
