vue3 中的script setup

最新推荐文章于 2023-06-20 22:49:36 发布

良月生秋

最新推荐文章于 2023-06-20 22:49:36 发布

阅读量3.5k

点赞数 1

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54866636/article/details/123369387

版权

Vue3的script setup是新的语法糖，旨在简化Composition API的使用，减少模板中的冗长代码。通过它，组件导入、props、emit、指令等都可以自动处理。setup中的数据、计算属性和方法可以直接在模板中使用，无需额外返回。同时，定义props和emit更加简洁，配合Suspense组件，可以实现异步加载。使用volar插件能提升script setup的编写体验。

摘要由CSDN通过智能技术生成

script setup

<script setup>是 Vue3 新出的语法糖，类型是Vue的Git RFC中的建议。需要明确的是，这并不是要完全替代任何当前写法。其目的是为开发人员提供更简洁的语法，简化使用Composition API时冗长的模板代码，以编写其单个文件组件。

在不使用 <script setup>, 我们代码是：

<template>
    <h1 v-text="count"></h1>
    <p v-text="double"></p>
    <button @click="add">count++</button>
</template>

<script>
    import { ref, unref, computed } from 'vue';
    export default {
      setup() {
        const count = ref(1);
        const double = computed(() => unref(count) * 2);
        function add() {
          count.value++;
        }
        return {
          count,
          double,
          add
        }
      }
    }
</script>

当我们需要引入一个 components 时，不仅需要在文件头部显式 import</