Vue.js 如何在VueJs 3的composition api中使用mounted函数

在本文中，我们将介绍如何在VueJs 3的composition api中使用mounted函数。composition api是Vue.js 3中的一项新功能，它允许我们在组件内部以功能为导向的方式组织代码。mounted函数是Vue.js中的生命周期钩子函数之一，在组件挂载后被调用。

阅读更多：Vue.js 教程

什么是mounted函数

mounted函数是Vue.js的生命周期钩子函数之一，当组件被挂载到DOM上后被调用。在mounted函数中，我们可以执行一些需要等到组件被挂载到DOM上后才能执行的操作，例如发送请求、添加事件监听器等。

如何使用mounted函数

在Vue.js 3的composition api中使用mounted函数非常简单。首先，我们需要引入onMounted这个函数，它是Vue.js 3提供的一个辅助函数。然后，我们可以通过onMounted来定义我们的mounted函数。

下面是一个示例：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('mounted');
      // 在这里执行一些挂载后需要执行的操作
    });
  },
};

在上面的示例中，我们使用onMounted函数来定义mounted函数。在这个函数的回调函数中，我们可以执行一些需要在组件挂载到DOM上后才能执行的操作。在这个示例中，我们只是简单地在控制台打印出’mounted’这个字符串，你可以根据自己的需要在这里执行任何操作。

示例：在mounted函数中发送请求

另一个常见的用例是在mounted函数中发送请求。假设我们有一个需要从服务器获取数据的组件，在这个组件挂载到DOM上后，我们希望发送一个HTTP请求来获取数据。我们可以在mounted函数中使用Axios或其他HTTP库来发送请求。

下面是一个示例：

import { onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    onMounted(() => {
      axios.get('/api/data')
        .then(response => {
          console.log(response.data);
          // 在这里处理响应数据
        })
        .catch(error => {
          console.error(error);
          // 在这里处理错误
        });
    });
  },
};

在这个示例中，我们使用Axios库来发送HTTP GET请求。在mounted函数的回调函数中，我们发送一个GET请求到/api/data，然后在响应成功时打印响应数据，如果发生错误时打印错误。

总结

在VueJs 3的composition api中使用mounted函数非常简单。我们可以使用onMounted函数来定义我们的mounted函数。在mounted函数中，我们可以执行一些在组件挂载到DOM上后需要执行的操作，例如发送请求、添加事件监听器等。通过合理使用mounted函数，可以更好地控制 Vue.js 组件的生命周期，并进行一些需要在组件被挂载到DOM上后才能执行的操作。