Vue3挂载前注册组件后调用根实例init方法报错如何解决

问题原因 #

Vue 3 中 Vue.createApp() 返回的是应用实例，仅包含 component、mount、unmount 这类全局配置方法，你定义的 init 方法是挂载在根组件实例上的，根组件实例需要通过 mount() 方法的返回值获取。
你之前的第一种写法是直接把 mount() 的返回值赋值给 app 变量，拿到的是根组件实例，所以可以正常调用 init；第二种写法你把 createApp() 的返回值（应用实例）赋值给了 app 变量，自然找不到 init 方法。

正确实现代码 #

const chartApp = {
    data(){
        // 你的data逻辑
    },
    methods:{
        async init() {
            // 你的异步逻辑
        }
    }
}

// 1. 先获取应用实例，用于注册全局组件
const app = Vue.createApp(chartApp);
// 2. 注册全局自定义组件
app.component('my-component', {
    template:'<div>hello</div>'
});
// 3. 挂载后获取根组件实例，调用init方法
const rootInstance = app.mount('#app');
rootInstance.init();

后续如果需要操作应用全局配置就调用 app 变量的相关方法，如果需要调用根组件的属性、方法就调用 rootInstance 变量的相关属性、方法即可。

内容的提问来源于stack exchange，提问作者James