Soy nuevo en Vue y, tal como lo veo, ambas funciones se pueden usar para definir/iniciar variables utilizadas en el archivo. Pero por lo que leí, no tengo claro cuáles son las diferencias y cuándo debo usar cuál para declarar/iniciar variables.
Hasta ahora solo me he dado cuenta de que las variables declaradas en la función de datos se envuelven en un objeto proxy, lo que causa problemas cuando intento guardar el objeto en una base de datos. Ahora estoy pensando si debo seguir usando la función de datos y crear un objeto normal desde el proxy cuando necesito guardarlo, o si debo usar la función de configuración.
Por si no te queda claro de lo que hablo:
Ejemplo A:
data() { return { person: { age: 5, name: "Peter" } } }Ejemplo B:
setup() { return { person: { age: 5, name: "Peter" } } }Puedes pensar en el Ejemplo A como:
setup() { const person = reactive({ age: 5, name: "Peter" }) return { person } } Pero en el Ejemplo B, el objeto person no se envolvió en reactivo, por lo que no será observado ni reactivo.
Un ejemplo más adecuado para datos -> configuración:
import { reactive, toRefs } from 'vue' setup() { const data = reactive({ person: { age: 5, name: "Peter" } }) return { '$data': data, ...toRefs(data), // so that `person` can be used in <template /> } }La diferencia es que data() es la sintaxis utilizada en la api de opciones de vue (el enfoque típico en Vue 2 que también es válido en Vue 3) y la sintaxis setup() es parte de la api de composición (introducida en vue 3) . Esta Api de composición hace que el bloque javascript de un componente vue sea más uniforme y reutilizable (entre otras ventajas). https://fjolt.com/article/vue-composition-api-vs-options-api#:~:text=What%20is%20the%20difference%20 between ,like%20in%20the%20Options%20API .