Vue3中使用PrimeVUE Table组件出现递归异常导致页面崩溃

这问题根本不是组件本身的递归bug，是代码写反了变量声明和调用顺序：

• 你把onMounted的调用写在了products这个ref声明的前面，let声明的变量存在暂时性死区，在声明语句执行前访问products会直接触发引用错误
• 这个错误被Vue的响应式渲染逻辑捕获后会反复尝试重渲染，最后栈溢出，看起来就像组件内部递归死循环，和PrimeVUE本身没有关系。

修复方法 #

两个必做调整：

1. 把所有ref、reactive这类响应式变量的声明，挪到生命周期、watch、computed等逻辑的前面，不要在变量还没声明的时候就去访问它
2. products初始化的时候给默认空数组，不要留undefined，避免部分老版本DataTable遍历undefined值触发内部异常

修正后的完整script代码：

<script>
import { ref, onMounted } from "vue";
import ProductService from '../services/ProductService';

export default {
    setup() {
        // 先声明响应式变量
        const products = ref([]);
        const productService = ref(new ProductService());

        // 声明完成后再写生命周期逻辑
        onMounted(() => {
            products.value = [
                {"id": "1000","code": "f230fh0g3","name": "Bamboo Watch","description": "Product Description","image": "bamboo-watch.jpg","price": 65,"category": "Accessories","quantity": 24,"inventoryStatus": "INSTOCK","rating": 5},
                {"id": "1001","code": "nvklal433","name": "Black Watch","description": "Product Description","image": "black-watch.jpg","price": 72,"category": "Accessories","quantity": 61,"inventoryStatus": "INSTOCK","rating": 4}    
            ]
        })

        return { products, productService }
    }
};
</script>

这类组合式API的顺序错误是Vue3新手高频踩坑点，不用特意找有没有其他开发者遇到同类问题，写完setup先顺着执行顺序捋一遍变量有没有先声明再使用，能排查掉80%的莫名其妙崩溃问题。

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