Vue3组合式API如何正确导入其他自定义组件并触发生命周期？

问题根因 #

你当前直接手动调用组件setup方法的写法不符合Vue的组件渲染规范：setup的执行依赖Vue内部维护的当前活跃组件实例上下文，你手动调用时这个上下文处于空状态，子组件内的onMounted等生命周期钩子无法绑定到正确的实例上，因此触发警告也无法正常执行。

通用解决方案 #

分两种场景对应解决：

场景1：需要在父组件中渲染子组件实例 #

你不需要手动调用setup，直接通过Vue提供的h渲染函数传入组件定义即可，Vue内部会自动完成实例创建、setup调用、生命周期注册的全流程，所有钩子都会正常触发。
修正后的代码示例：

import { h } from 'vue'
import { Perscombo } from "../index"

const vertContainer = h(
  "div",
  {},
  [
    // 直接将组件作为h的第一个参数，第二个参数传入props和事件回调
    h(Perscombo, {
      id: "variant",
      options: variants,
      // 如果需要绑定事件，比如子组件emit的change事件，按onXxx格式声明即可
      // onChange: (val) => { /* 处理逻辑 */ }
    }),
    outerContainer
  ]
);

场景2：需要复用子组件的逻辑而非渲染组件 #

你可以将Perscombo内的公共逻辑抽离为独立的组合式函数（composable），在需要复用的组件setup中直接调用即可。只要调用时机处于父组件setup的同步执行阶段，内部的生命周期钩子会自动绑定到父组件实例上正常触发。
示例结构：

// composables/usePerscombo.js 抽离的公共逻辑
export function usePerscombo(props, context) {
  // 原Perscombo组件setup内的所有逻辑，包括onMounted注册
  onMounted(() => {
    // 初始化逻辑
  })
  // 返回需要暴露的状态和方法
  return {}
}

// Perscombo组件内调用
import { usePerscombo } from '../composables/usePerscombo'
export default defineComponent({
  // props声明等
  setup(props, context) {
    return usePerscombo(props, context)
  }
})

// 父组件内复用逻辑
import { usePerscombo } from '../composables/usePerscombo'
export default defineComponent({
  setup(props, context) {
    // 直接调用composable即可，内部onMounted会正常触发
    const perscomboLogic = usePerscombo({id: "variant", options: variants}, context)
    // 其他逻辑
  }
})

注意事项 #

• 禁止手动调用组件的setup方法，该方法是Vue内部渲染流程的专属入口，外部调用会丢失上下文信息
• 所有组件渲染统一通过模板声明、h函数传入组件定义的方式实现

内容的提问来源于stack exchange，提问作者hyperbotauthor