Vue3升级兼容@vue-compat：组合式API组件v-model警告问题

我正在将Vue 2.6旧项目升级至Vue 3.4，遵循迁移构建指引，但在将UiMediaUploader重构为组合式API后遇到问题：

<script setup>
import { useDropzone } from "vue3-dropzone";
import axios from "axios";
import { $post, $get, $delegatedUpload } from '@/plugins/Misc';
import { VideoUploader } from '@api.video/video-uploader';
import Media from '@/components/models/Media';

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  explicit: {
    type: Boolean,
    default: () => false
  },
})

const emit = defineEmits(['update:modelValue'])

....
</script>

持续收到以下警告：

main.js:102 [Vue warn]: (deprecation COMPONENT_V_MODEL) Component declares "modelValue" prop, which is Vue 3 usage, but is running under Vue 2 compat v-model behavior. You can opt-in to Vue 3 behavior on a per-component basis with `compatConfig: { COMPONENT_V_MODEL: false }`.
  Details: https://v3-migration.vuejs.org/breaking-changes/v-model.html 
  at <UiMediaUploader ref="uploader" modelValue= [] onUpdate:modelValue=fn  .

补充信息：

• 已升级的其他选项API组件无此问题
• 我已在父组件UiPost.vue中配置：

compatConfig: {
  MODE: 2,
  COMPONENT_V_MODEL: false
},

• 尝试设置MODE为3也无效果

解决方法 #

问题核心是**compatConfig是组件级配置**，父组件的配置不会传递给子组件。你需要直接在UiMediaUploader组件内启用Vue 3的v-model行为：

1. 在UiMediaUploader的<script setup>顶部添加兼容配置：

<script setup>
// 给当前组件单独配置v-model兼容规则
const compatConfig = {
  COMPONENT_V_MODEL: false
}

import { useDropzone } from "vue3-dropzone";
// ... 其他导入和组件代码
</script>

2. 若项目中多数组件已完成Vue 3重构，可全局配置避免逐个组件设置（注意测试未升级组件的兼容性）：
   在main.js中添加：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.compatConfig = {
  MODE: 3, // 完全启用Vue 3行为，关闭大部分兼容层
  COMPONENT_V_MODEL: false
}
app.mount('#app')

原理：你的UiMediaUploader已经使用了Vue 3标准的modelValue和update:modelValue写法，但默认兼容模式会强制按Vue 2的v-model逻辑处理，因此需要在组件内显式关闭该兼容规则，让Vue 3原生逻辑生效。

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