Vue中使用extends结合Setup SFC生产环境报错，开发环境正常

问题原因 #

你直接调用Base.setup(props, ctx)的写法不符合Vue 3的组件继承规范：开发环境下Vue调试模式对这类不规范写法兼容性较强，但生产构建时（经过tree-shaking、代码压缩后），父组件的setup函数可能被构建工具优化修改，或者手动调用时传递的props/ctx上下文与父组件实际执行时的上下文不一致，最终引发报错。

另外，Vue的extends机制本身会自动触发父组件的setup逻辑，手动重复调用会导致状态冲突或执行上下文异常。

修复方案 #

方案1：抽离复用逻辑为组合式函数（推荐） #

将Base组件的setup逻辑抽成独立的组合式函数，在父组件和子组件中分别引入使用，这是Vue 3官方推荐的逻辑复用方式：

1. 创建复用逻辑文件：

// useBaseLogic.js
export function useBaseLogic(props, ctx) {
  // 此处编写Base组件原有的setup逻辑
  const baseMessage = '来自Base组件的内容'
  const handleBaseClick = () => {
    ctx.emit('base-click')
  }
  
  return { baseMessage, handleBaseClick }
}

2. 修改Base.vue：

<script>
import { useBaseLogic } from './useBaseLogic'
export default {
  setup(props, ctx) {
    return useBaseLogic(props, ctx)
  }
}
</script>

3. 修改子组件：

<script>
import Base from './Base.vue'
import { useBaseLogic } from './useBaseLogic'
export default {
  extends: Base,
  setup(props, ctx) {
    const baseState = useBaseLogic(props, ctx)
    // 子组件本地状态与方法
    const localMessage = '子组件本地内容'
    
    return {
      ...baseState,
      localMessage
    }
  }
}
</script>

方案2：利用Vue组件继承自动处理setup #

如果不需要手动复用父组件的setup返回值，可直接移除手动调用代码，Vue的extends会自动执行父组件的setup并合并状态：

<script>
import Base from './Base.vue'
export default {
  extends: Base,
  setup(props, ctx) {
    // 直接编写子组件本地逻辑，父组件setup会自动执行并合并状态
    const localMessage = '子组件本地内容'
    return { localMessage }
  }
}
</script>

关键注意点 #

• 禁止直接调用其他组件的setup函数：组件的setup是Vue内部管理的生命周期函数，手动调用会破坏其执行上下文。
• Vue 3优先推荐用**组合式函数（Composables）**替代传统extends进行逻辑复用，这种方式更灵活，能避免继承带来的耦合问题。

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