Vue.js 中使用 onMounted 钩子函数调用 getUserInfo 方法

在 Vue.js 中，onMounted 钩子函数会在组件挂载到 DOM 后被调用。我们可以利用这个钩子函数来执行一些需要在组件挂载后才能进行的操作，例如调用 API 获取数据。

传统方式

<template>
  <div>{{ userInfo }}</div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      // 调用 API 获取用户信息
      // ...
      this.userInfo = // 获取到的用户信息
    },
  },
};
</script>

选项式 API 方式

<template>
  <div>{{ userInfo }}</div>
</template>

<script>
import { ref, onMounted } from 'vue';

const userInfo = ref(null);

onMounted(() => {
  getUserInfo();
});

const getUserInfo = () => {
  // 调用 API 获取用户信息
  // ...
  userInfo.value = // 获取到的用户信息
};

export default {
  setup() {
    return { userInfo };
  },
};
</script>

两种方式的比较：

传统方式使用 mounted 钩子函数，选项式 API 方式使用 onMounted 钩子函数。
传统方式将 getUserInfo 方法放在 methods 对象中，选项式 API 方式将其定义为一个独立的函数。
传统方式使用 this 访问数据和方法，选项式 API 方式使用 ref 创建响应式数据，并使用 value 属性访问和修改数据。

选择哪种方式取决于你的偏好和项目需求。

Vue.js 中使用 onMounted 钩子函数调用 getUserInfo 方法