import {ref, onMounted, computed

import {ref, onMounted, computed, getCurrentInstance } from 'vue';
中的 onMounted、和computed是干嘛的？ 下面举例说明：

在 Vue 3 中，onMounted 和 computed 是两个非常重要的组合式 API，用于在组件生命周期和计算属性中执行特定的任务。下面我将分别解释这两个函数的用途，并通过代码示例来说明它们的使用。

• onMounted

作用：onMounted 是一个生命周期钩子函数。当组件挂载到 DOM 上后，onMounted 内的代码将会被执行。通常用来处理在组件加载后需要执行的操作，比如发起 API 请求、设置事件监听器等。

示例:

<template>
  <div>{{ message }}</div>
</template>

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

const message = ref('');

onMounted(() => {
  // 在组件挂载后执行
  message.value = '组件已挂载';
  console.log('组件已经挂载到 DOM 上了');
});
</script>

解释：在这个例子中，当组件挂载到 DOM 上时，onMounted 内的代码会被执行，message 的值被设置为 '组件已挂载'，并且在控制台输出信息。

• computed

作用：computed 用于创建计算属性。计算属性是基于其他响应式数据的派生值，它们会在依赖的响应式数据变化时自动更新。与 ref 不同，computed 的值是基于其他响应式数据计算出来的，且默认具有缓存特性——只有在依赖的数据发生变化时，计算属性才会重新计算。

示例:

<template>
  <div>
    <input v-model="firstName" placeholder="First Name" />
    <input v-model="lastName" placeholder="Last Name" />
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

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

const firstName = ref('');
const lastName = ref('');

const fullName = computed(() => {
  return firstName.value + ' ' + lastName.value;
});
</script>

解释：在这个例子中，fullName 是一个计算属性，它是基于 firstName 和 lastName 这两个 ref 创建的。当你在输入框中输入名字或姓氏时，fullName 会自动更新并显示在页面上。

• 总结

onMounted：用于在组件挂载到 DOM 后执行特定操作。
computed：用于创建基于其他响应式数据计算出来的值，并且具有缓存特性。

这些功能让 Vue 的组件变得更加灵活和强大，能够根据不同的需求来管理数据和生命周期事件。