Vue组合式API生命周期插入组件的实现方法？

Question

如上图，我编写了一个 .ts 文件，当我在别的组件引入的时候，可以正确在组件的挂载后执行，这种思想设计是如何实现的呢？

（感觉有点类似于函数编程里的 pipe 和 compose，但是由于是一个初学者，还并不能理解 vue 这样的思想）

我期望得到的解释：该如何写一个 demo 级别的小例子去模仿实现这样的结果呢？（并不是指写出一个生命周期函数的完整过程，而是希望可以通过简单的 js 去模仿实现它）

Answer 1

useTest.js ：

import { onMounted } from 'vue';

export function useTest() {
  onMounted(() => {
    console.log('组件挂载后的 onMounted 钩子被调用');
  });
}

另一个 Vue 组件里引入：

// MyComponent.vue
<template>
  <!-- ... -->
</template>

<script>
import { useTest } from './useTest';

export default {
  setup() {
    useTest();
    // 其他 setup 逻辑...
  },
};
</script>

JS 来模拟：

// 模拟 Vue 的 onMounted 钩子
function onMounted(callback) {
  // 模拟 Vue 的挂载过程
  document.addEventListener('DOMContentLoaded', callback);
}

// 自定义组合函数
function useTest() {
  onMounted(() => {
    console.log('模拟的 onMounted 钩子被调用');
  });
}

// 在模拟的组件挂载时调用 useTest
useTest();