在服务上使用 Vue 3 反应性有意义吗？

Question

我找到了以下 DataTable code snippet by PrimeVue, that uses the new Compositon API

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

export default {
    setup() {
        onMounted(() => {
            productService.value.getProductsSmall().then(data => products.value = data);
        })

        const products = ref();
        const productService = ref(new ProductService());
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^    
        return { products, productService }
    }
}
</script>

ref() ProductService 有意义吗？
我猜它不会。我错了吗？

Answer 1

我相信你是对的，分配给ref是不必要的。

我认为可能是为了与选项 API:

保持一致而添加的

import ProductService from './service/ProductService';

export default {
    data() {
        return {
            products: null
        }
    },
    productService: null,
    created() {
        this.productService = new ProductService();
    },
    mounted() {
        this.productService.getProductsSmall().then(data => this.products = data);
    }
}

但是 productService 不是 data 对象的一部分，因此它不是反应性的，并且因为它是一个不保持状态的服务，所以不需要保持状态。