[Vue 3] App 中的 _instance 问题

[Kabuda-czh]

问题:
因业务需求需要在ts文件中动态对节点进行渲染, 所以需要外部传值
在 development 开发环境中 createApp(xxx) 返回的 App 里面能获取到 _instance 并能对 props 进行赋值,
在 production 生产环境中 _instance 为 null

版本:
vite: ^2.9.8
vue: ^3.2.33

最简复现demo
https://github.com/Kabuda-czh/pure-admin-thin
通过 pnpm install 下载, 直接 build 通过 Live Server 即可看到异常

[liulinboyi]

Hope this can help you!
#6251 (comment)

[Kabuda-czh]

sorry, my problem is in .ts file
you can download my demo to see this

[liulinboyi]

sorry, my problem is in .ts file you can download my demo to see this

You can use like this:

import { createApp, h, ref } from 'vue'
import App from './App.vue'
const appRef = ref()
const app = createApp({
    render() {
        return h(App, {ref: appRef})
    }
})
app.mount('#app')
console.log(appRef.value, appRef.value.instance)

repo

[Kabuda-czh]

sorry, its not work
i want to render some node and transfer props in .ts file

import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import type { App } from "vue";
import { createApp } from "vue";
import VueNode from "./VueNode.vue";

class VueHtmlNode extends HtmlNode {
  app: App<Element>;
  isMounted: any;
  constructor(props: any) {
    super(props);
    this.app = createApp(VueNode);
  }
  setHtml(rootEl: HTMLElement) {
    const node = document.createElement("div");
    const { model } = this.props;
    const properties = model.getProperties();
    rootEl.appendChild(node);
    if (!this.isMounted) {
      this.app.mount(node);
      this.app._instance.props.properties = properties.datas;
      this.isMounted = true;
    } else {
      this.app._instance.props.properties = properties;
    }
  }
}

in this code, the this.app._instance in dev is not null, but in prod the _instance is null

[liulinboyi]

sorry, its not work i want to render some node and transfer props in .ts file

import { HtmlNode, HtmlNodeModel } from "@logicflow/core";
import type { App } from "vue";
import { createApp } from "vue";
import VueNode from "./VueNode.vue";

class VueHtmlNode extends HtmlNode {
  app: App<Element>;
  isMounted: any;
  constructor(props: any) {
    super(props);
    this.app = createApp(VueNode);
  }
  setHtml(rootEl: HTMLElement) {
    const node = document.createElement("div");
    const { model } = this.props;
    const properties = model.getProperties();
    rootEl.appendChild(node);
    if (!this.isMounted) {
      this.app.mount(node);
      this.app._instance.props.properties = properties.datas;
      this.isMounted = true;
    } else {
      this.app._instance.props.properties = properties;
    }
  }
}

in this code, the this.app._instance in dev is not null, but in prod the _instance is null

the content

import { createApp, h, ref } from 'vue'
import App from './App.vue'
const appRef = ref()
const app = createApp({
    render() {
        return h(App, {ref: appRef})
    }
})
app.mount('#app')
console.log(appRef.value, appRef.value.instance)

is in the main.ts . https://github.com/liulinboyi/app-expose/blob/main/src/main.ts

[Kabuda-czh]

its worked, thanks