Vue Conf 21 大会上:尤大提到 script setup 语法,到底香不香?
如果你最近使用 Vite 和 Vue3 工作,你会注意到,在 Vue 组件中会使用这种<srcript>
语法。
<script setup> import HelloWorld from './components/HelloWorld.vue' // 这个模板使用的是 Vue3 实验性`<script setup>` SFCs
你可能会有疑惑三连,“这是什么鬼? 这是 Options API ? 还是 Composition API? setup
方法又在哪里?”
<script setup>
类型是 Vue 的 Git RFC 中的建议。 需要明确的是,这并不是要完全替代任何当前写法。 其目的是为开发人员提供更简洁的语法,以编写其单个文件组件。
在本文中,我们仔细研究它的工作原理以及一些有用的方法。
script setup
在<script setup>
中,我们不必声明export default
和setup
方法,这种写法会自动将所有顶级变量声明公开给模板(template)使用。
在 Composition API 中,我们习惯创建setup
方法,然后返回我们想要公开东西,如下所示:
<script> import { ref, computed } from 'vue' export default { setup () { const a = ref(3) const b = computed(() => a.value + 2) const changeA = () => { a.value = 4 } return { a, b, changeA } // have to return everything! } } </script>
如果使用 <script setup>
语法,我们可以用下面的代码来实现与上面的一样功能:
<script setup> import { ref, computed } from 'vue' // all of these are automatically bound to the template const a = ref(3) const b = computed(() => a.value + 2) const changeA = () => { a.value = 4 } </script>
不仅是数据,计算的属性和方法,甚至是指令和组件也可以在我们的template
中自动获得。
<template> <component-b /> </template> <script setup> import ComponentB from './components/ComponentB.vue' // really that's it! </script>
这个很魔法。
那么,这有什么意义呢?
长话短说,此语法使单个文件组件更简单。
用 RFC 的里的原话来说,“该提案的主要目标是通过将<script setup>
的上下文直接暴露给模板来减少 SFC 内部 Composition API
使用的冗长性。”
这就是我们刚刚看到的,无需关心在setup
方法返回的值(因为有时应该会忘记在 setup 返回我们需要的值,导致模板获取不到对应的值),我们可以简化代码。
<script setup>的更高级用法
现在我们知道<script setup>
到底是什么,以及为什么它有用,接着,我们看一下它的一些更高级的功能。
访问 props, emit 事件 等
首先,你可能想知道如何执行标准的 Vue 操作,例如:
- 访问 props
- 怎么发出自定义事件
- 访问上下文对象
在 Composition API 中,这些放在了setup
方法中的参数
setup (props, context) { // context has attrs, slots, and emit }
但是,在script setup
语法中,我们可以通过从 Vue 导入 3 次对应的 API 来访问这些相同的选项。
- defineProps – 顾名思义,它允许我们为组件定义 props
- defineEmits – 定义组件可以发出的事件
- useContext – 可以访问组件的槽和属性
<template> <button @click="$emit('change')"> Click Me </button> </template> <script setup> import { defineProps, defineEmit, useContext } from 'vue' const props = defineProps({ foo: String, }) const emit = defineEmit(['change', 'delete']) const { slots, attrs } = useContext() </script>
通过这 3 种导入,我们可以获得传统设置方法所惯用的功能。
创建异步 setup 方法
script setup
语法的另一个很酷的功能是创建异步setup
非常容易。
这对于在创建组件时加载 api,甚至将代码绑定到<suspense>
功能很有用。
我们所要做的就是让我们的 setup
函数是异步的,在我们的script setup
中使用一个顶级的await
。
例如,如果我们使用的是 Fetch API,我们可以像这样使用await
<script setup> const post = await fetch(`/api/pics`).then((a) => a.json()) </script>
这样setup()
函数将是异步的。
使用<script setup>和一个普通的<script>
<script setup>
为其顶级绑定创建自己的脚本作用域。 但是在某些情况下,必须在模块范围内执行代码。
该 RFC 中的 2 个具体示例是:
- Declaring named exports
- 创建仅执行一次的全局副作用
这可以通过在 script setup 旁边添加一个普通的<script>
块来完成,如下所示。
<script> performGlobalSideEffect() // this can be imported as `import { named } from './*.vue'` export const named = 1 </script> <script setup> // code here </script>
总结
目前,这个 script setut
是可选的,所以如果你想尝试它,只需在的script
标签中添加setup
。
要了解有关 script setup
的更多信息,请点击此处,链接到完整的 RFC 及其动机,确切的语法和更多的技术实现。
码云笔记 » Vue Conf 21 大会上:尤大提到 script setup 语法,到底香不香?