Vue 3 upgrade image from guide

Estoy siguiendo una guía de actualización sobre cómo pasar de Vue a Vue3. Muestra cómo manejarlo si la aplicación está estructurada como:

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

El problema es que mi mi aplicación está estructurada así:

new Vue({
    el: '#app',
    data() {
        return {
            // initialData
        };
    },
    mounted() {
       // mounted
    },
    methods: {

    }
}

¿Dónde coloco los datos, montados, métodos, etc. para que funcionen con la nueva estructura en Vue 3?

2
DaBosco 7 dic. 2020 a las 20:20

2 respuestas

La mejor respuesta

Puede importar h para representar el componente App y usar sus opciones habituales:

import {createApp,h} from 'vue'
...
createApp({
  data() {
        return {
            // initialData
        };
    },
    mounted() {
       // mounted
    },
    methods: {

    },
 render: () => h(App)
})
1
Boussadjra Brahim 7 dic. 2020 a las 17:29

¿no es lo mismo que crear un componente de aplicación?

const app = createApp(App);
app.mount("#app");

En el componente de la aplicación

import { defineComponent, onMounted } from "vue";

export default defineComponent({
  name: "App",
  components: {},
  setup() {
    const initialData = "";

    onMounted(() => {
      console.log("mounted");
    });

    const aMethod = () => {
      return null;
    };

    return {
      initialData,
      aMethod
    };
  }
});
</script>
0
Aaron Saunders 8 dic. 2020 a las 03:47