vue3.2踩坑记录:update:modelValue在dev环境正常，在prod环境报错：ReferenceError: childValue is not defined

问题描述：

为了方便描述，我编写了一个Demo，包含一个组件ParentComponent和一个子组件ChildCompinent

//ChildComponent.vue
<template>
<button @click="update">子组件 更新按钮</button>
</template>
<script>
export default{
    props:['modelValue'],
    methods:{
        update(){
            this.$emit("update:modelValue","updatedValue");
        }
    }
}
</script>
<style>
</style>

//ParentComponent
<script setup>
import ChildComponentVue from './ChildComponent.vue';

</script>
<template>
<text>{{childValue}}</text>
<br/>
<ChildComponentVue v-model="childValue"></ChildComponentVue>
</template>
<script>

export default{
    data(){
        return {
            childValue:"not updated yet",
        }
    }


}
</script>
<style>
</style>

 如上面的代码所示，父组件通过v-model与子组件双向绑定数据childValue.

单击子组件的按钮会向父组件更新这个数据。

我们在dev环境下测试：

npm run serve

单击按钮前：

 

 单击按钮后

代码运行正常，然后我们打包成 prod 环境，再测试单击按钮，发现报错了：

 问题分析：

点击出错的文件，定位到发生错误的位置：

发现上图中的代码，第56行，编译器通过n.childValue访问childValue值，但是在58行直接访问childValue值，而报错发生在第58行：childValue未定义。

猜想是编译器的BUG在编译时第58行访问childValue时应当使用n.childValue的方式访问而错误的写成了直接访问childValue。

这是VUE的BUG。

发现官方的Github仓库已经有人提了这个Issue： 

when use custom v-model (with <script setup> style)，it goes well in dev env,but may occur error：modelValue is undefined in production env · Issue #5584 · vuejs/core · GitHub

解决方法：

在这个Issue下很多大佬讨论除了一些临时的解决办法。

这是vue3.2新出的bug，这个bug的愿意在于vue3.2的新特性setup编写模式的BUG，只要避免使用setup语法就能避免这个BUG。发现Demo中的ParentComponent中使用了部分setup语法，把它修改为default语法，重新测试。

//ParentComponent
<template>
<text>{{childValue}}</text>
<br/>
<ChildComponent v-model="childValue"></ChildComponent>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default{
    data(){
        return {
            childValue:"not updated yet",
        }
    },
    components:{
        "ChildComponent":ChildComponent
    }
}
</script>
<style>
</style>

Prod环境按钮单击后： 

 问题解决！

资料参考：

Github上的Issue

官方文档中<script setup>的描述