Vue 2.6升级2.7后getComponentName返回函数而非undefined求助

问题核心 #

将项目从Vue 2.6升级至2.7后，部分使用大小写Props的组件触发Vue内部提示，getComponentName()方法本应返回undefined，但实际返回了函数类型值，导致后续逻辑报错并使整个应用崩溃。该函数代码如下：

function getComponentName(options) {
    return options.name || options.__name || options._componentTag;
}

临时修复方案 #

先修改getComponentName()函数，确保返回值为字符串或undefined，避免因类型不匹配崩溃：

function getComponentName(options) {
    const candidate = options.name || options.__name || options._componentTag;
    // 若候选值为函数则执行并返回结果，否则直接返回
    return typeof candidate === 'function' ? candidate() : candidate;
}

根本原因分析 #

从你的package.json依赖来看，问题大概率源于第三方组件库与Vue 2.7的兼容性：

• Vue 2.7整合了Vue 3的部分内部API，对组件元数据（如__name、_componentTag）的处理逻辑发生变化
• 你使用的bootstrap-vue@~2.21.2、vuetify@~2.3.23版本发布于Vue 2.7之前，未适配这种内部属性的类型变化，导致部分组件的__name或_componentTag被设置为函数而非字符串
• Vue 2.7对Props大小写的校验更严格，大小写Props的使用触发了内部提示逻辑，进而暴露了getComponentName()的类型问题

长期解决方案 #

1. 升级第三方依赖至适配版本

   • 将bootstrap-vue升级到~2.23.1（该版本开始适配Vue 2.7）
   • 将vuetify升级到~2.6.14（完善了对Vue 2.7的支持）
   • 执行npm install更新依赖后测试

2. 规范组件Props命名

   • Vue官方推荐Props使用kebab-case命名（模板中无需转换），统一调整所有大小写Props为kebab-case，避免触发内部校验提示
   • 若需保留camelCase命名，确保在模板中使用v-bind绑定（如:myProp="value"）

3. 检查自定义组件的name属性

   • 确保所有自定义组件的name选项为字符串类型，而非函数或其他类型

附用户提供的package.json #

{
  "name": "foo",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --watch",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "vue-cli-service build --watch",
    "watchprod": "vue-cli-service build --mode production --watch"
  },
  "dependencies": {
    "axios": "~0.21.4",
    "axios-cache-adapter": "~2.7.3",
    "bootstrap": "~5.1.3",
    "bootstrap-vue": "~2.21.2",
    "core-js": "^3.27.2",
    "localforage": "~1.9.0",
    "localforage-memoryStorageDriver": "~0.9.2",
    "lodash": "~4.17.20",
    "moment": "~2.24.0",
    "postcss-prefix-selector": "~1.16.0",
    "v-calendar": "^1.0.8",
    "v-jsoneditor": "~1.4.2",
    "vue": "~2.7.14",
    "vue-class-component": "~7.2.6",
    "vue-cookies": "~1.8.2",
    "vue-mdi-icon-picker": "1.1.0",
    "vue-multiselect": "~2.1.7",
    "vue-property-decorator": "~9.1.2",
    "vue-router": "~3.5.4",
    "vue-swatches": "~2.1.1",
    "vue-toastr": "~2.1.2",
    "vue2-editor": "~2.10.3",
    "vuedraggable": "~2.24.3",
    "vuetify": "~2.3.23",
    "vuetify-datetime-picker": "~2.1.1",
    "vuex": "~3.6.2"
  },
  "devDependencies": {
    "@babel/core": "7.0.0",
    "@popperjs/core": ">=2.10.2 <3.0.0",
    "@types/node": "^18.14.5",
    "@types/webpack-env": "^1.18.0",
    "@typescript-eslint/eslint-plugin": "~5.4.0",
    "@typescript-eslint/parser": "~5.4.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "~11.0.2",
    "eslint": "~8.35.0",
    "eslint-config-prettier": "~8.3.0",
    "eslint-plugin-prettier": "~4.0.0",
    "eslint-plugin-vue": "~9.9.0",
    "jquery": "1.9.1 - 3",
    "postcss": ">4 <9",
    "prettier": "~2.4.1",
    "sass": "~1.32.13",
    "sass-loader": "~13.2.0",
    "tslib": "^2.4.1",
    "typescript": "~4.5.5",
    "vue-cli-plugin-vuetify": "^2.5.8",
    "vue-template-compiler": "~2.7.14",
    "vuetify-loader": "^1.9.2",
    "webpack": "^5.75.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

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