是否可以将其变成 '<script setup>' ？我尝试了很多方法，但可能错过了一些东西

Question

有可能把它变成<script setup>吗？我尝试了很多方法，但可能错过了一些东西。需要帮忙 ！

<script>
    import ProductsAPI from '../api/products.api';

    export default {
        name: 'products',

        components: {
            product: 'product',
        },

        data() {
            return {
                products: [],
                error: '',
            };
        },

        async created() {
            this.products = await ProductsAPI.fetchAll();
        },
    };
</script>

Answer 1

它有助于将问题分解为可以单独解决的较小问题......

\n

组件注册

\n

组件在将其定义导入 a 时会自动注册<script setup>，因此注册Product很简单：

\n

<script setup>\nimport Product from \'@/components/Product.vue\' // locally registered\n</script>\n

\n

数据属性

\n

反应式数据属性声明为ref(或reactive)：

\n

<script setup>\nimport { ref } from \'vue\'\n\nconst products = ref([])\nconst error = ref(\'\')\n\n// to change the value of the `ref`, use its `.value` property\nerror.value = \'My error message\'\nproducts.value = [{ name: \'Product A\' }, { name: \'Product B\' }]\n</script>\n

\n

或者，您可以在 中使用新的/实验性的反应性转换<script setup>，它全局定义反应性 API，以$（例如$reffor ref）为前缀，并避免必须ref通过展开.value：

\n

<script setup>\nlet products = $ref([])\nlet error = $ref(\'\')\n\n// assign the values directly (no need for .value)\nerror = \'My error message\'\nproducts = [{ name: \'Product A\' }, { name: \'Product B\' }]\n</script>\n

\n

created生命周期钩子

\n

该<script setup>块与钩子发生的时间相同setup，这也与钩子发生的时间相同created，因此您可以将原始的钩子代码复制到那里。要使用它await，您可以将调用包装在async IIFE中：

\n

<script setup>\nimport ProductAPI from \'@/api/products.api\'\nimport { ref } from \'vue\'\n\nconst products = ref([])\n\n;(async () => {\n  products.value = await ProductAPI.fetchAll()\n})()\n</script>\n

\n

...或者创建一个async在其中调用的函数：

\n

<script setup>\nimport ProductAPI from \'@/api/products.api\'\nimport { ref } from \'vue\'\n\nconst products = ref([])\n\nconst loadProducts = async () => products.value = await ProductAPI.fetchAll()\nloadProducts()\n</script>\n

\n

元件名称

\n

该属性没有等效的组合 API name，但您可以在同一 SFC 中使用一个<script>块<script setup>来包含组合 API 不支持的任何属性：

\n

<script setup>\n\xe2\x8b\xae\n</script>\n\n<!-- OK to have <script> and <script setup> in same SFC -->\n<script>\nexport default {\n  name: \'products\',\n}\n</script>\n

\n

或者，您可以通过其文件名指定组件的名称。此功能已添加到v3.2.34-beta.1. 例如，<script setup>文件名为 的组件MyComponent.vue的名称为MyComponent.

\n

演示

\n