如何在 vue3 中使用選項 API 和組合 API？

Question

vue3 + vite2

非常簡單的代碼如下。
期望：單擊按鈕時，更改反應性消息變量。
它在開發（vite）時正常工作，在構建生產（vite build）和部署之后，它似乎無法工作，點擊方法無法訪問反應性 msg 變量。
從 vuejs 文檔中，選項 API 可以與組合 API 一起使用。

<template>
  <h1>{{ msg }}</h1>
  <button @click="click">Click</button>
</template>

<script setup>
  const msg = ref('hello')      
</script>

<script>
  import { ref } from 'vue'
  export default {   
    methods: {
      click() {
        this.msg = 'ok'     
      },
    },
  }
</script>

Answer 1

如果使用設置 function，則可以組合選項和組合 api：

 const { ref } = Vue const app = Vue.createApp({ setup() { const msg = ref('hello') return { msg } }, methods: { click() { this.msg = 'ok' }, }, }) app.mount('#demo')

 <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <h1>{{ msg }}</h1> <button @click="click">Click</button> </div>