import {xxx} from ‘vue‘在vue中都能导入哪些模块

以下是汇总并包含示例代码的回答：

从 `'vue'` 中可以导入的常见模块和功能有：

1. `ref`：用于创建简单的响应式数据。
2. `reactive`：用于创建复杂的响应式对象。
3. `computed`：创建计算属性。
4. `watch`：监听响应式数据的变化。
5. `provide / inject`：实现依赖注入。
6. `toRefs`：将响应式对象转换为普通对象，其中属性为 `ref` 。
7. `onUnmounted`：在组件卸载时执行清理操作。

前面的都好理解，但是有个问题为什么要unmount卸载组件？

组件卸载通常有以下几个原因：

1. 页面路由切换：当用户在应用中导航到不同的页面或路由时，当前页面中的组件可能会被卸载，以释放资源并为新页面的组件加载腾出空间。

2. 组件的动态创建和销毁：在某些情况下，组件可能是根据特定条件动态创建和显示的，当不再需要显示该组件时，会将其卸载。

3. 优化性能和资源管理：如果组件占用了较多的内存、计算资源或保持了一些长时间运行的操作（如订阅、定时器等），在不再使用时卸载组件可以释放这些资源，提高应用的整体性能和响应性。

4. 条件渲染：根据某些条件决定是否显示组件，当条件不满足时卸载组件。

总之，卸载组件有助于有效地管理应用的资源和性能，确保只保留和运行当前需要的组件，提供更流畅和高效的用户体验。

以下是一个使用这些功能的示例代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, onUnmounted } from 'vue';

// 使用 ref 创建简单的响应式数据
const count = ref(0);

// 使用 reactive 创建复杂的响应式对象
const person = reactive({
  name: 'John',
  age: 30
});

// 创建计算属性
const doubleCount = computed(() => count.value * 2);

// 监听响应式数据的变化
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

// 定义一个增加 count 值的方法
const increment = () => {
  count.value++;
};

// 在组件卸载时执行清理操作
onUnmounted(() => {
  console.log('Component unmounted');
});
</script>

在上述示例中：
- `ref` 用于创建 `count` 响应式变量。
- `reactive` 用于创建包含多个属性的响应式对象 `person` 。
- `computed` 基于 `count` 创建了计算属性 `doubleCount` 。
- `watch` 监听 `count` 的变化并打印日志。
- `onUnmounted` 在组件卸载时打印一条消息。