vue.js - 有没有可能把它变成 '<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

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

组件注册

组件在将它们的定义导入到 <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>

或者，您可以使用新的/实验性的 Reactivity Transform在<script setup> ，它全局定义了 react 性 API，前缀为 $ (例如，$ref 代表 ref )，并且避免必须解包 ref通过 .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生命周期钩子(Hook)

<script setup> block 发生在与 setup 相同的时间钩子(Hook)，这也与 created 的时间相同钩子(Hook)，这样你就可以在那里复制你原来的钩子(Hook)代码。使用 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属性，但您可以使用 <script>除了 <script setup> 之外的 block 在同一 SFC 中包含 Composition API 不支持的任何 Prop :

<script setup>
⋮
</script>

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

或者，您可以通过文件名指定组件的名称。这feature添加于 v3.2.34-beta.1 .例如，带有 <script setup> 的组件其文件名为 MyComponent.vue会有一个名字 MyComponent .

demo