Vue 2.x项目中使用<script setup>语法数据绑定不生效如何解决？

问题原因 #

Vue 2.x 原生不支持 <script setup> 语法。你仅安装了 Composition API 运行时包 @vue/composition-api 只能让你在普通 <script> 标签中使用 Composition API 写法，没有对应的编译能力解析 <script setup> 这个Vue 3专属的编译时语法糖，所以模板无法读取到顶层声明的变量，才会出现内容不渲染的问题。

解决方案 #

如果要在Vue 2.x项目中使用<script setup>，需要额外安装社区提供的编译兼容插件，操作步骤如下：

• 确保已经完成@vue/composition-api的全局注册，在项目入口文件添加以下代码：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

• 安装编译插件unplugin-vue2-script-setup
• 根据你的项目构建工具配置插件生效：
  以Vue CLI项目的vue.config.js配置为例：

const ScriptSetup = require('unplugin-vue2-script-setup/webpack')
module.exports = {
  configureWebpack: {
    plugins: [ScriptSetup()]
  }
}

• 重启项目后，你的测试代码即可正常渲染Hello!内容。

注意事项 #

• 需将项目依赖的vue-loader升级到15.10.0及以上版本，避免编译异常
• 该兼容方案为社区维护，部分Vue 3专属的<script setup>特性不支持，使用复杂语法前建议先核对兼容范围

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