Vue3.2中<script setup>的reactive变量在生产环境created中undefined

核心问题原因 #

script setup语法糖编译后，内部声明的变量默认不会暴露到组件实例上。开发环境为调试需求额外做了暴露逻辑，但生产环境的编译优化会移除这些调试代码，最终导致Options API中this.state返回undefined。

低成本替代方案 #

方案1：改用setup选项（非script setup语法糖） #

直接使用Vue 3的setup选项替代script setup，返回需要共享的变量，这些变量会自动合并到组件实例，现有Options API代码无需修改，可通过this直接访问：

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      a: '',
      b: ''
    })
    // 返回的对象会被合并到组件实例
    return { state }
  },
  created() {
    console.log(this.state) // 开发/生产环境均正常
  }
}
</script>

方案2：script setup中手动挂载变量到组件实例 #

如果必须保留script setup语法，可通过getCurrentInstance获取组件实例，手动将变量挂载到实例上：

<script setup>
import { reactive, getCurrentInstance } from 'vue'

const state = reactive({
  a: '',
  b: ''
})

const instance = getCurrentInstance()
if (instance) {
  // 将state挂载到组件实例，供Options API的this访问
  instance.proxy.state = state
}
</script>

<script>
export default {
  created() {
    console.log(this.state) // 开发/生产环境均正常
  }
}
</script>

注意：生产环境下默认配置即可支持getCurrentInstance获取实例，无需额外调整打包配置。

开发与生产环境不一致的配置说明 #

这类问题本质是script setup的编译逻辑差异导致的，无法单纯通过配置解决。核心解决思路是让Composition API声明的变量主动暴露到组件实例，上述两种方案已从根源消除了环境差异，无需额外配置。

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