Estoy aprendiendo Vue y he visto muchas aplicaciones de muestra diferentes, documentación y procedimientos. Parece que hay varias formas diferentes en que las personas inicializan sus componentes y luego los montan en su aplicación.
Mi pregunta es ¿por qué hay tantas formas? ¿Cuál es la mejor práctica en torno a esto?
Como referencia, estoy haciendo mi compilación a través de npm , no a través de una biblioteca incluida en un archivo HTML .
Opción 1
const app = new Vue({ el: '#app', data: function(){ } });opcion 2
export default { name: "Test", data() { } };Opción 3
const app = Vue.createApp({}) // Define a new global component called button-counter app.component('button-counter', { data() { return { count: 0 } } }) app.mount('#components-demo') La opción 3, por ejemplo, proviene de la documentación de Vue, pero cuando inicializo una aplicación de esa manera, aparece el error de que Vue no existe.
Con la esperanza de obtener algo de claridad para mí y para cualquier otro principiante que tropiece con esta pregunta.
La opción 1 es la forma Vue 2 de crear una instancia.
La opción 3 es la forma Vue 3.
La opción 2 no inicializa una nueva instancia de Vue
La forma correcta de instanciar es la createApp({}) desde Vue 3. La nueva aplicación Vue solo es compatible con Vue 2.
`export default { name: "Test", data() {} };` Lo anterior es una forma de crear un componente llamado Test. Desde Vue3, alternativamente, también puede crear un componente con defineComponent({})
Más información -> https://v3.vuejs.org/guide/instance.html