javascript - 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 钩子被调用');  });}// 在模拟的组件挂载时调用 useTestuseTest();