Vue项目v-model仅在生产环境抛出ReferenceError报错

该问题是单文件组件中混用<script setup>语法糖和传统选项式API写法，配合Vue生产环境的编译优化策略导致的：

• 开发环境运行时，Vue使用宽松的模板编译规则，所有模板引用的变量都会通过组件实例的响应式代理做兜底查找，哪怕变量没有在<script setup>顶层声明，也能正常读取到选项式data中定义的text，所以功能表现正常。
• 生产构建时，Vue编译器会开启作用域提升、静态标记等优化，检测到组件存在<script setup>块后，会默认模板内绑定的所有变量都来自<script setup>的顶层作用域，不再走实例属性的兜底查找逻辑。你的text变量仅在选项式data中声明，没有在<script setup>顶层暴露，编译后v-model的赋值逻辑会直接尝试访问不存在的text变量，直接抛出引用错误。
  项目中其他表单元素的同类异常，都是因为对应的v-model绑定变量没有在<script setup>中声明，仅在选项式配置中定义导致的。

二选一即可，优先推荐第一种，符合Vue3的官方最佳实践：

• 全量使用<script setup>写法，移除冗余的选项式script块
  <script setup>中导入的组件会自动注册，不需要手动写components配置，响应式变量通过ref声明即可，修改后的代码如下：

  <script setup>
  import { ref } from "vue";
  import Overwrite from "../components/Overwrite.vue";
  const text = ref("");
  </script>
  <template>
    <div>
      <!-- 原有其他业务内容 -->
      <textarea v-model="text" cols="99" rows="20"></textarea>
      <!-- 原有其他业务内容 -->
    </div>
  </template>
  

• 全量使用选项式API写法，移除<script setup>块
  如果暂时不想切换到组合式写法，直接删除顶部的<script setup>块，把组件导入逻辑移到选项式script中即可：

  <template>
    <div>
      <!-- 原有其他业务内容 -->
      <textarea v-model="text" cols="99" rows="20"></textarea>
      <!-- 原有其他业务内容 -->
    </div>
  </template>
  
  <script>
  import Overwrite from "../components/Overwrite.vue";
  export default {
    data() {
      return {
        text: ""
      };
    },
    components: { Overwrite },
  };
  </script>
  

注意：Vue3虽然支持<script setup>和普通选项式<script>在同一个单文件组件中共存，但仅适合用来定义<script setup>无法覆盖的配置项（比如组件name、inheritAttrs、自定义宏无法声明的高阶选项等），不要把响应式数据、业务方法这类核心逻辑拆分到两个script块中，很容易出现作用域不兼容的问题。

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