使用vite2+vue3.0构建的项目中，子组件更新父组件的值，在使用npm run build 打包后报错

[nowo]

使用vite2+vue3.0构建的项目中，子组件更新父组件的值（父子组件数据动态双向绑定） 在使用npm run build 打包后报错

这里写了个测试

1、app.vue传值“Hello Vue 3 + Vite"到HelloWorld.vue页面

2、HelloWorld.vue通过input框更新传过来的值

文件代码

app.vue文件下（父组件）

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div style="padding: 15px; background: #ddd">
    <p class="red">app.vue父组件</p>
    <h1>{{ msg }}</h1>
  </div>
  <HelloWorld v-model:msg="msg" />
</template>

<script setup>
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

const msg = ref("Hello Vue 3 + Vite");

// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>

HelloWorld.vue文件下（子组件）

<template>
  <div style="padding: 15px; background: #41b883">
    <p class="red">HelloWorld.vue子组件</p>
    <h1>{{ msg }}</h1>
    <input v-model="msg" />
  </div>
  ...
</template>
<script setup>
import {
  defineProps,
  reactive,
  getCurrentInstance,
  defineEmit,
  watchEffect,
  watch,
  onUpdated,
} from "vue";

const props = defineProps({
  // msg: String,
  msg: {
    type: String,
    default: "",
  },
});

const { ctx } = getCurrentInstance();
const emit = defineEmit(["update:msg"]);

// 方法一
watchEffect(() => {
  console.log(props.msg);
  // ctx.$emit("update:msg", props.msg);
  emit("update:msg", props.msg);
});

</script>

页面效果

在开发模式下是能够正常的

在开发模式下能够正常使用,但是到打包上线后,浏览器控制台就报错,数据也没有相应的更新

这个是package.json安装使用的版本

所以现在我不知道是问题在哪里

代码已上传到GitHub https://github.com/mrjimin/testvite

打包后的文件预览地址 https://mrjimin.github.io/testvite/

[haoqunjiang]

@HcySunYang 看起来像是 @vue/compiler-sfc 的问题

[HcySunYang]

确实是 compiler-core 的问题，原因是在分析 v-model 绑定的表达式类型的时候，没有想到它会是 props，但问题是为啥 v-model 一个 props？这是错误的用法呀。

[nowo]

在vue2.0中是使用:msg.sync="msg"来进行数据双向绑定的，vue3.0数据双向绑定这块移除.sync修饰符，用v-model来替代了，
这vue3.0更新变化说明https://v3.cn.vuejs.org/guide/migration/v-model.html#%E6%A6%82%E8%A7%88

[haoqunjiang]

那是在父组件用的，子组件只需要负责发送事件就行了。
v-model 会改变绑定参数的值，如果把它用在 props 上会破坏单向数据流，一直都是不建议的。

[HcySunYang]

提了个 PR，和 vite 没啥关系，似乎可以关闭这个 issue 了？

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.