Vue3中使用<script setup>集成GrapesJs编辑器失败求助

近期尝试在Vue3项目中用*<script setup>*语法集成GrapesJs编辑器，结果浏览器里看不到编辑器，承载容器是空的。相关配置如下：

<template>
  <div ref="canvas"></div>
</template>

<script setup>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

const canvas = ref(null)
const editor = grapesjs.init(
  {
    container: canvas.value,
    fromElement: true, // Load existing HTML from the container
    storageManager: {
        type: "local", // Enable saving and loading from local storage
        autosave: true, // Enable autosave
        autoload: true, // Load previously saved data
    },
    canvas: {
        styles: [
            // Custom canvas styles
        ],
        scripts: [
            // custom scripts
        ],
    },
    plugins: ["gjs-preset-webpage"],
    pluginsOpts: {
        "gjs-preset-webpage": {
            // Options for the preset plugin
        },
    },
});
</script>

注：用传统<script>语法的Vue3项目里，相似配置能正常运行；当前项目用传统写法也没问题，确定问题出在*<script setup>*语法上。传统写法配置如下：

<template>
    <div ref="editor"></div>
</template>

<script>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";

export default {
    name: app,
    data() {
        return {};
    },
    mounted() {
        const editor = grapesjs.init({
            container: this.$refs.editor,
            fromElement: true, // Load existing HTML from the container
            storageManager: {
                type: "local", // Enable saving and loading from local storage
                autosave: true, // Enable autosave
                autoload: true, // Load previously saved data
            },
            canvas: {
                styles: [
                    // Custom canvas styles
                ],
                scripts: [
                    // custom scripts
                ],
            },
            plugins: ["gjs-preset-webpage"],
            pluginsOpts: {
                "gjs-preset-webpage": {
                    // Options for the preset plugin
                },
            },
        });
    },
};
</script>

在*<script setup>*里直接执行grapesjs.init时，组件还未完成挂载，canvas.value此时为null。GrapesJs初始化时无法获取有效的DOM容器，因此无法渲染编辑器。

传统写法中将初始化逻辑放在*mounted钩子*中，该钩子会在组件挂载完成后触发，此时this.$refs.editor已指向真实DOM元素，初始化自然成功。

把GrapesJs的初始化逻辑放到Vue的onMounted钩子中，确保组件挂载完成、DOM元素存在后再执行初始化：

<template>
  <div ref="canvas"></div>
</template>

<script setup>
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
import { ref, onMounted } from "vue";

const canvas = ref(null)
let editor = null;

onMounted(() => {
  editor = grapesjs.init({
    container: canvas.value,
    fromElement: true,
    storageManager: {
        type: "local",
        autosave: true,
        autoload: true,
    },
    canvas: {
        styles: [],
        scripts: [],
    },
    plugins: ["gjs-preset-webpage"],
    pluginsOpts: {
        "gjs-preset-webpage": {},
    },
  });
});
</script>

如果需要在其他逻辑中访问编辑器实例，保持editor变量的可访问性即可。

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