Vue3递归组件报错：无法访问未初始化的CommentComponent

你遇到的Uncaught ReferenceError: can't access lexical declaration 'CommentComponent' before initialization错误，是Firefox JS引擎对递归组件的变量提升处理和其他浏览器存在差异导致的——直接导入并注册自身组件时，Firefox会认为组件变量在初始化完成前就被模板引用了。

下面是两种可行的修复方案：

方案一：利用组件name属性实现递归（推荐） #

通过给组件设置name选项，模板中直接使用这个名称作为组件标签，无需导入自身组件，从根源避免变量初始化顺序问题：

<template>
    <div class="comment">
        <div class="comment_header">
            <div>{{ comment_data.user }} - {{ comment_data.relativetime }}</div>
        </div>      
        <div class="content">{{ comment_data.content }}</div>

        <!-- 使用组件name作为标签，同时添加v-for的key -->
        <div class="comment" v-for="comment_item in comment_data.replies" :key="comment_item.id">
            <Comment :comment_data='comment_item'></Comment>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Comment', // 定义组件名称
    props: ['comment_data'],
    mounted() {
    }
}
</script>

<style scoped>
/* 保留原有样式 */
</style>

方案二：延迟组件注册 #

通过函数式导入的方式注册组件，延迟组件的初始化时机，避开Firefox的变量提升限制：

<template>
    <div class="comment">
        <div class="comment_header">
            <div>{{ comment_data.user }} - {{ comment_data.relativetime }}</div>
        </div>      
        <div class="content">{{ comment_data.content }}</div>

        <!-- 添加v-for的key -->
        <div class="comment" v-for="comment_item in comment_data.replies" :key="comment_item.id">
            <CommentComponent :comment_data='comment_item'></CommentComponent>
        </div>

    </div>
</template>

<script>
export default {
    props: ['comment_data'],
    mounted() {
    },
    components: {
        // 用函数返回组件，延迟加载
        CommentComponent: () => import('@/components/Comment.vue')
    }
}
</script>

<style scoped>
/* 保留原有样式 */
</style>

额外注意 #

给v-for循环添加:key="comment_item.id"是Vue的强制要求，既能避免渲染警告，也能提升列表渲染的性能。

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