Vue.js拆分模块报错：渲染时message属性未定义如何解决？

我刚接触Vue.js，用VS Code开发，从Vue官网复制的单文件Hello World示例能正常运行：

<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({
  setup() {
    const message = ref('Hello World!')
    return {
      message
    }
  }
}).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

但拆分代码到多文件后，浏览器出现警告：

[Vue warn]: Property "message" was accessed during render but is not defined on instance. at

拆分后的主文件代码：

<script type="module">
   import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
   import MySetup from './setup.js'

  createApp(MySetup).mount('#app')
</script>

<div id="app">
  <h1>{{ message }}</h1>
</div>

setup.js原代码：

export default {
  setup() {
    const message = ref('Hello World!')
    return {
      message
    }
  }
}

问题原因 #

ES模块拥有独立的作用域，每个模块必须自行导入所需的依赖项，主文件中导入的ref不会自动共享给setup.js模块。在setup.js中直接使用ref会导致该函数未定义，无法正确创建响应式的message变量，最终组件实例上没有这个属性，渲染时触发警告。

解决方案 #

修改setup.js，在文件顶部导入ref：

import { ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

export default {
  setup() {
    const message = ref('Hello World!')
    return {
      message
    }
  }
}

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