是否可以將其轉換為'<scriptsetup>'？我嘗試了很多方法，但可能遺漏了一些東西

有沒有可能把它變成<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>

uj5u.com熱心網友回復：

您應該在注冊之前匯入該組件。

<script>
import ProductsAPI from '../api/products.api';
import ProductComp from './components/Product.vue'

export default {
    name: 'products',

    components: {
        'product': ProductComp
    },

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

    async created() {
        this.products = await ProductsAPI.fetchAll();
    },
};

使用腳本設定看起來像這樣。

 <script setup>
   import ProductsAPI from '../api/products.api';
   import Product from './components/Product.vue'

   let error = '';
   let products = await ProductsAPI.fetchAll();
</script>

uj5u.com熱心網友回復：

它有助于將問題分解為可以單獨解決的小問題......

組件注冊

組件在將它們的定義匯入 a 時自動注冊<script setup>，因此注冊Product很簡單：

<script setup>
import Product from '@/components/Product.vue' // locally registered
</script>

資料屬性

反應資料屬性宣告為ref（或reactive）：

<script setup>
import { ref } from 'vue'

const products = ref([])
const error = ref('')

// to change the value of the `ref`, use its `.value` property
error.value = 'My error message'
products.value = [{ name: 'Product A' }, { name: 'Product B' }]
</script>

或者，也可以使用新的/實驗物種變換中<script setup>，該全域定義的反應性的API，前綴$（例如，$ref對ref），以及具有解開避免refs可通過.value：

<script setup>
let products = $ref([])
let error = $ref('')

// assign the values directly (no need for .value)
error = 'My error message'
products = [{ name: 'Product A' }, { name: 'Product B' }]
</script>

created 生命周期鉤子

該<script setup>塊發生的同一時間setup掛鉤，這也是因為相同的時間created掛鉤，所以你可以有復制原始的鉤子代碼。要使用await，您可以將呼叫包裝在async IIFE 中：

<script setup>
import ProductAPI from '@/api/products.api'
import { ref } from 'vue'

const products = ref([])

;(async () => {
  products.value = await ProductAPI.fetchAll()
})()
</script>

...或創建一個async在其中呼叫的函式：

<script setup>
import ProductAPI from '@/api/products.api'
import { ref } from 'vue'

const products = ref([])

const loadProducts = async () => products.value = await ProductAPI.fetchAll()
loadProducts()
</script>

組件名稱

該name屬性沒有等效的 Composition API ，但您可以在同一 SFC 中使用一個<script>塊<script setup>來包含 Composition API 不支持的任何道具：

<script setup>
?
</script>

<!-- OK to have <script> and <script setup> in same SFC -->
<script>
export default {
  name: 'products',
}
</script>

演示

uj5u.com熱心網友回復：

該問題特定于組合 API，而不是特定于script setup. 只要組件撰寫正確，script除了少數例外，可以script setup通過提取內容輕松轉換為，setup同時保留匯入和setup回傳值。

組合 API 中的生命周期與createdhook接近但不直接對應。問題是created最初被濫用了。Vue 大量借鑒了 React 并具有類似的生命周期，后者對組件創建中副作用的使用有嚴格的規定。所有副作用都應該在組件已經安裝后執行。

Vue 沒有與 React 相同的技術限制，但也存在一些問題。只是沒有足夠的理由去做副作用created，所以它們屬于mounted. 將它們放在 中幾乎沒有優勢created，而缺點是初始渲染會被稍后在組件安裝時完成的作業所阻止，并且在組件創建時過早完成的副作用可能會導致 SSR 出現問題由于其語意，然后存在問題script setup。mounted和unmounted鉤子也有明確的語意，后者可以對前者中發生的副作用進行清理。

在兩者script setup和scriptwithsetup函式中，它可以是：

let products = ref([]);

onMounted(async () => {
  products.value = await ProductsAPI.fetchAll();
});

TL;DR：對于異步副作用，使用mounted而不是created生命周期掛鉤是一個很好的做法。mounted可在script setup.

標籤：

上一篇：前端的Vue和Blazor

下一篇：單擊按鈕兩三次后，Vue的自定義工具提示行為很奇怪