En mi opinión, cuando devuelves una variable de un componente composable , eso significa que quieres trabajar con esa variable como una salida del componente componible en tus componentes . Entonces, cuando lo devuelve como de solo lectura , eso significa que no desea cambiarlo durante otras operaciones en el componente y si cambia ese Vue , cree una advertencia para usted. Pero cuando lo devuelve como calculado , eso significa que desea tener el valor de su variable principal (aquí llamado estado de userState ), pero también, si es necesario, lo cambia en su componente. Aquí publiqué los códigos de mi componente y componible para determinar claramente las oraciones anteriores:

código de componente:

 <template> <div> <p>{{ emailComputed }}</p> <p> {{ email }} </p> <button @click="changeEmail">change email</button> </div> </template> <script> /* importing composable */ import {useReadOnly} from "../composables/codeReadOnly"; import {reactive} from "vue"; export default { setup() { const { email, emailComputed } = useReadOnly(); const changeEmail = function () { /* uncomment the line below and comment second line */ // ---------------------------------------------------- // emailComputed.value = "new-email@email.com"; email.value = "new-email@email.com"; } return { emailComputed, email, changeEmail } } } </script> <style scoped> </style>

código componible:

 import {reactive, computed, toRef, readonly} from "vue"; export function useReadOnly() { const userState = reactive({ email: 'test@test.com', name: "", }) return { email: readonly(toRef(userState, 'email')), emailComputed: computed({ get: () => userState.email, set: (val) => { userState.email = val; } }) } }

En el código anterior, puede cambiar el valor de emailComputed haciendo clic en el botón, pero no puede cambiar el valor de email en su componente principal. Esa es la diferencia que podría entender, pero tal vez también haya otras diferencias que no conozco.