vue3 + vite2
Código muy simple como el siguiente.
Espere: cuando haga clic en el botón, cambie la variable de mensaje reactivo.
funciona de manera esperada cuando el desarrollo (vite), después de la producción de compilación (vite build) y la implementación, parece que no puede funcionar, el método de clic no puede acceder a la variable de mensaje reactivo.
Desde el documento vuejs, la API de opciones puede funcionar junto con la API de composición.
<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>Puede combinar opciones y api de composición si usa la función de configuración:
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>