vue3 中的script setup

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 进行导入，而且需要 components 字段加入声明。不仅如此，在 setup 中声明的变量如果需要被模板使用，那么需要在 setup 的尾部显式 return 返回，如果你的组件模板使用的变量不多，那么这种情况还可以勉强接受。但是当变量和方法逐渐增加时，每次都要在 setup 后进行 return 返回，这无疑是一件枯燥的事情，在重构代码时，你也会面临巨大挑战。

为了解决这个问题，vue3添加了script setup语法糖提案。

使用了 <script setup> 之后，实现一样的功能，代码如下：

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

<script setup>
import { ref, unref, computed } from 'vue'

const count = ref(1)
const double = computed(() => unref(count) * 2)
function add() {
  count.value++
}
</script>

不仅是数据，计算的属性和方法，甚至是指令和组件也可以在我们的template中自动获得，这个就很魔法

使用它的意义又在哪呢？

长话短说，此语法使单个文件组件更简单。
用RFC的里的原话来说，“该提案的主要目标是通过将<script setup>的上下文直接暴露给模板来减少SFC内部 Composition API 使用的冗长性。”

这就是我们刚刚看到的，无需关心在setup方法返回的值(因为有时应该会忘记在 setup 返回我们需要的值，导致模板获取不到对应的值)，我们可以简化代码。

使用

组件使用

在 script setup 中 所以组件导入即自动注册：

<template>
  <Test :msg="msg"/>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Test from './components/test.vue'
const msg = ref('msg')
</script>

省去了组件的注册步骤，也没有显式的导出变量的动作。

使用props & emit & useContext

<template>
  <button @click="emit('setData', Number.parseInt(Math.random() * 10))">添加数据</button>
</template>

<script setup>
    import { defineEmit, defineProps } from 'vue'
    // defineProps(['list'])
    const props = defineProps({
      list: {
        type: Array,
        default: () => []
      }
    })
    const emit = defineEmit(['deleteData', 'setData'])
    const { slots , attrs } = useContext()
</script>

• props 需要使用到 defineProps 来定义，用法跟之前的props写法类似

• emit 使用 defineEmit 定义组件可以发出的事件

• useContext 访问组件的槽和属性

• defineProps/defineEmit 会根据传递的值做简单的类型推断

defineProps – 顾名思义，它允许我们为组件定义props；

defineEmits – 定义组件可以发出的事件

useContext – 可以访问组件的槽和属性

指令

指令跟组件是一样导入就自动注册。

<template>
  <div v-click-outside />
</template>

<script setup>
  import { directive as clickOutside } from 'v-click-outside'
</script>

inheritAttrs

<template inherit-attrs="false"></template>

默认值true,在这种情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上

await

如果使用了 await 那么 需要 与 Suspense 异步组件 搭配使用

/* 父组件 */
<Suspense>
   <template #default>
     <AwaitComponent />
   </template>
   <template #fallback>
       loading....
   </template>
</Suspense>

<template>
  <h1>{{ result }}</h1>
</template>

<script lang="ts">
import { ref } from "vue";
const result = ref("")
function promiseFun () {
	return new Promise((resolve, reject) => {
		setTimeout(() => resolve('22322323'), 3000)
	})
}
result.value = await promiseFun()
</script>

vscode配套插件使用

volar是一个vscode插件，用来增强vue编写体验，使用volar插件可以获得script setup语法的最佳支持。

要了解有关 script setup 的更多信息请点击 👉 这是个链接