vue3 ts 生命周期写法

Vue 3中的生命周期函数和setup中的生命周期钩子函数有一些变化。在Vue 3中，常见的生命周期函数已经被取消，取而代之的是使用了组合式API的setup函数。在setup函数中，可以通过导入特定的生命周期钩子函数来执行相应的操作。

以下是Vue 3中常用的生命周期钩子函数及其在setup中的写法：
- beforeCreate -> 在setup函数之前，无需特定钩子函数
- created -> 在setup函数中，可以使用 `onBeforeMount` 钩子函数
- beforeMount -> 在setup函数中，可以使用 `onBeforeMount` 钩子函数
- mounted -> 在setup函数中，可以使用 `onMounted` 钩子函数
- beforeUpdate -> 在setup函数中，可以使用 `onBeforeUpdate` 钩子函数
- updated -> 在setup函数中，可以使用 `onUpdated` 钩子函数
- beforeUnmount -> 在setup函数中，可以使用 `onBeforeUnmount` 钩子函数
- unmounted -> 在setup函数中，可以使用 `onUnmounted` 钩子函数

在setup函数中，可以使用Vue提供的 `onXXX` 钩子函数来替代相应的生命周期函数。例如，如果要在mounted阶段执行操作，可以使用`onMounted`钩子函数。

相关问题

用vue3的写法重写一遍

好的，以下是使用 Vue3 的版本，我们将之前的代码重构一下：

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import ChildComponent from '@/components/ChildComponent.vue'; // 假设 ChildComponent 是一个局部组件

const isRouterAlive = ref(true);
const childRef = ref(null); // 初始化一个空的 ref 用于存储子组件实例

onMounted(() => {
  childRef.value = null; // 初始化时设置为空，后续根据实际组件填充
});

function switchToChildComponent() {
  if (childRef.value === undefined || !childRef.value.isMounted()) {
    childRef.value = ChildComponent;
  } else {
    nextTick(() => {
      childRef.value.$forceUpdate(); // 刷新数据
    });
  }
}

// 如果需要在路由发生变化时切换到 ChildComponent 并刷新
useEffect(() => {
  if (isRouterAlive.value && childRef.value !== ChildComponent) {
    switchToChildComponent();
  }
}, [isRouterAlive, childRef, ChildComponent]);
</script>

<template>
  <el-config-provider :locale="messages[locale]">
    <div>
      <router-view v-slot="{ Component }" :key="Component.name || 'default'" v-show="isRouterAlive">
        <transition-group tag="div" name="fade">
          <component ref="child" :is="Component" @beforeUnmount="handleBeforeUnmount" />
        </transition-group>
      </router-view>
    </div>
  </el-config-provider>
</template>

<script>
export default {
  methods: {
    handleBeforeUnmount() {
      childRef.value = null; // 在组件卸载前清空 ref
    },
  },
};
</script>

在这个版本中，我们使用了 Vue3 的 `ref`、`setup`、`useEffect` 和 `nextTick` 函数，以及 `v-show` 替换 `v-if`。`switchToChildComponent` 函数负责切换组件并保证在新组件加载时刷新数据。`@beforeUnmount` 生命周期钩子用于在子组件卸载时清除引用。

vue3 useSlots有时候为空

### 解决 Vue 3 中 `useSlots` 返回空或未定义的问题

在 Vue 3 组件中，当使用组合式 API 和 `<script setup>` 语法时，可能会遇到 `useSlots()` 函数返回 `null` 或者 `undefined` 的情况。这通常发生在组件渲染逻辑尝试访问插槽内容过早的时候。

为了确保能够正确获取到插槽的内容，在调用 `useSlots()` 获取当前作用域内的插槽对象前应该确认组件已经被挂载完成[^1]：

import { onMounted, ref } from 'vue';
import { useSlots } from 'vue';

export default {
  setup() {
    const slots = useSlots();
    let hasDefaultSlot = ref(false);

    onMounted(() => {
      if (slots.default) {
        hasDefaultSlot.value = true;
      }
    });

    return {
      hasDefaultSlot,
    };
  },
};

上述代码展示了如何通过监听组件生命周期中的 `onMounted` 钩子来安全地检查默认插槽是否存在。只有当组件完全加载完毕之后才会去判断是否有传递给它的自定义内容。这样做可以有效防止因早期查询而导致的潜在错误。

另外一种方法是在模板内部直接检测插槽的存在性并相应调整视图结构:

<template>
  <div v-if="hasDefaultSlot">
    <!-- 渲染有插槽的情况 -->
  </div>
  <div v-else>
    <!-- 处理无插槽的情况 -->
  </div>
</template>

<script lang="ts" setup>
const slots = useSlots();
let hasDefaultSlot = !!slots?.default; // 使用可选链操作符简化写法
</script>

此方式利用了 JavaScript 的三元运算符以及条件渲染特性，使得即使 `useSlots().default` 是 `undefined` ，也不会影响页面正常显示，并且可以根据实际情况提供不同的用户体验路径。