Vue3集成Facebook评论插件偶发渲染失效（宽高为0）问题求助

• 固定延时逻辑不可靠：硬编码的setTimeout无法对齐FB SDK加载、DOM渲染的完成时机，执行时机早于准备状态时就会解析失效，节点宽高变为0。
• 路由切换的判断逻辑存在缺陷：当前init逻辑仅在节点无fb-xfbml-state属性时执行解析，路由切换后URL更新，但原有节点已经被解析过带该属性，不会重新渲染新URL对应的评论内容。
• 缺少FB SDK加载完成的监听逻辑：仅判断window.FB是否存在，若SDK在init执行后才加载完成，解析逻辑会直接跳过不执行。

核心修改点：

1. 移除所有固定setTimeout，改为监听FB SDK加载完成事件，保证DOM挂载完成后再执行解析
2. 路由切换时主动清除原有fb-xfbml-state属性，强制重新解析新URL对应的评论
3. 直接对评论容器节点执行解析，无需调用父元素
4. 新增边界判断，避免ref为null时报错
5. 将URL获取逻辑改为计算属性，符合Vue响应式规则

<template>
    <div
        ref="commentContainer"
        class="fb-comments"
        :data-href="currentUrl"
        :data-width="cwidth"
        :data-numposts="numposts"
    ></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch, computed } from "vue";
import router from "../../router";
export default defineComponent({
    props: {
        cwidth: {
            type: String,
            default: "100%",
        },
        numposts: {
            type: String,
            default: "2",
        },
    },
    setup({ cwidth, numposts }) {
        const commentContainer = ref<HTMLElement | null>(null);
        const currentUrl = computed(() => document.location.origin + document.location.pathname);

        const initFbComments = () => {
            if (!window.FB || !commentContainer.value) return;
            // 清除已有解析状态，强制重新渲染
            commentContainer.value.removeAttribute('fb-xfbml-state');
            // 直接解析当前评论容器
            window.FB.XFBML.parse(commentContainer.value);
        };

        onMounted(() => {
            // 监听FB SDK加载完成事件
            if (window.FB) {
                initFbComments();
            } else {
                // 若SDK未加载，监听fbAsyncInit事件，SDK加载完成后自动触发
                window.fbAsyncInit = () => {
                    initFbComments();
                };
            }
        });

        // 路由切换时重新渲染评论
        watch(
            () => router.currentRoute.value,
            () => {
                initFbComments();
            }
        );

        return { cwidth, numposts, commentContainer, currentUrl };
    },
});
</script>

• 确认FB SDK引入代码放在页面全局，不要放在组件内部异步加载，避免加载时机混乱
• 若仍有偶发布局偏移，可以给.fb-comments类添加最小高度样式：.fb-comments { min-height: 200px; }

内容的提问来源于stack exchange，提问作者B.Ch.