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
的更多信息请点击 ?? 这是个链接