vue 3.2 的 script setup 语法
共 3029字,需浏览 7分钟
·
2021-10-27 21:40
vue 3.2 已经正式支持 语法,并且现在就可以在生产环境下使用了,接下开始学习基本用法。
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的
语法,它具有更多优势:
1.更少的样板内容,更简洁的代码。2.能够使用纯 Typescript 声明 props 和抛出事件。3.更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。4.更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
基本语法
要使用这个语法,需要将 setup attribute 添加到 代码块上:
<script setup>
console.log('hello script setup')
script>
里面的代码会被编译成组件 setup()
函数的内容。这意味着与普通的 只在组件被首次引入的时候执行一次不同,
中的代码会在每次组件实例被创建的时候执行。
顶层的绑定会被暴露给模板
当使用 的时候,任何在
声明的顶层的绑定 (包括变量,函数声明,以及
import
引入的内容) 都能在模板中直接使用:
<script setup>
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
script>
<template>
<div @click="log">{{ msg }}div>
template>
import
导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数,并不需要通过 methods 选项来暴露它:
<script setup>
import { capitalize } from './helpers'
script>
<template>
<div>{{ capitalize('hello') }}div>
template>
响应式
响应式状态需要明确使用响应式 APIs 来创建。和从 setup()
函数中返回值一样,ref 值在模板中使用的时候会自动解包:
<script setup>
import { ref } from 'vue'
const count = ref(0)
script>
<template>
<button @click="count++">{{ count }}button>
template>
使用组件
范围里的值也能被直接作为自定义组件的标签名使用:
<script setup>
import MyComponent from './MyComponent.vue'
script>
<template>
<MyComponent />
template>
将 MyComponent 看做被一个变量所引用。
动态组件
由于组件被引用为变量而不是作为字符串键来注册的,在 中要使用动态组件的时候,就应该使用动态的
:is
来绑定:
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
template>
请注意组件是如何在三元表达式中被当做变量使用的。
递归组件
一个单文件组件可以通过它的文件名被其自己所引用。例如:名为 FooBar.vue 的组件可以在其模板中用
引用它自己。
请注意这种方式相比于 import
导入的组件优先级更低。如果有命名的 import
导入和组件的推断名冲突了,可以使用 import
别名导入:
import { FooBar as FooBarChild } from './components'
命名空间组件
可以使用带点的组件标记,例如
来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用:
<script setup>
import * as Form from './form-components'
script>
<template>
<Form.Input>
<Form.Label>labelForm.Label>
Form.Input>
template>
defineProps 和 defineEmits
在 中必须使用
defineProps
和 defineEmits
API 来声明 props 和 emits ,它们具备完整的类型推断并且在 中是直接可用的:
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup code
script>
defineProps
和 defineEmits
都是只在 中才能使用的编译器宏。他们不需要导入且会随着
处理过程一同被编译掉。
defineProps
接收与 props 选项相同的值,defineEmits
也接收 emits 选项相同的值。
defineProps
和 defineEmits
在选项传入后,会提供恰当的类型推断。
传入到 defineProps
和 defineEmits
的选项会从 setup 中提升到模块的范围。因此,传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是,它可以引用导入的绑定,因为它们也在模块范围内。
如果使用了 Typescript,使用纯类型声明来声明 prop 和 emits 也是可以的。
defineExpose
使用 的组件是默认关闭的,也即通过模板
ref
或者 $parent
链获取到的组件的公开实例,不会暴露任何在 中声明的绑定。
为了在 组件中明确要暴露出去的属性,使用
defineExpose
编译器宏:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
script>
当父组件通过模板 ref
的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number }
(ref 会和在普通实例中一样被自动解包)
useSlots 和 useAttrs
在 使用 slots 和 attrs 的情况应该是很罕见的,因为可以在模板中通过
$slots
和 $attrs
来访问它们。在你的确需要使用它们的罕见场景中,可以分别用 useSlots
和 useAttrs
两个辅助函数:
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
script>
useSlots
和 useAttrs
是真实的运行时函数,它会返回与 setupContext.slots
和 setupContext.attrs
等价的值,同样也能在普通的组合式 API 中使用。
与普通的 script 一起使用
可以和普通的
一起使用。普通的
在有这些需要的情况下或许会被使用到:
1.无法在 声明的选项,例如 inheritAttrs 或通过插件启用的自定义的选项。2.声明命名导出。3.运行副作用或者创建只需要执行一次的对象。
<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
runSideEffectOnce()
// 声明额外的选项
export default {
inheritAttrs: false,
customOptions: {}
}
script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
script>
顶层 await
中可以使用顶层 await。结果代码会被编译成
async setup()
:
<script setup>
const post = await fetch(`/api/post/1`).then(r => r.json())
script>
另外,await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。