最近写代码的时候,发现
这样的代码,没见过,好奇,想知道。
所以就有了这篇文章。
很多文章都说setup是vue3的特权。但是,
vue2.7
以后,vue2也有了这样的特性,所以大胆的去学习吧。
版本号 | 描述 | |
---|---|---|
文章日期 | 2023-10-30 | |
vue | 2.7 |
是在单文件组件 (SFC) 中使用组合式 API的
编译时
语法糖。
- 更少的样板内容,更
简洁
的代码- 能够使用纯
Typescript
声明 props 和抛出事件。- 更好的运行时
性能
(其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。- 更好的 IDE
类型推断性能
(减少语言服务器从代码中抽离类型的工作)。
要使用这个语法,需要将
setup
属性添加到script
代码块上
<script setup>
console.log('hello script setup')
</script>
顶层的绑定会被暴露给模板
- 任何在
声明的顶层的绑定 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用
- import 导入的内容也会以同样的方式暴露。意味着可以在模板表达式中直接使用导入的 helper 函数,并不需要通过 methods 选项来暴露它:
<script setup>
// import 出来的变量
import { capitalize } from './helpers'
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
<template>
<div @click="log">{{ msg }}</div>
<div>{{ capitalize('hello') }}</div>
</template>
- 直接使用
范围里的值也能被直接作为自定义组件的标签名使用:
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<MyComponent />
</template>
- 动态组件
由于组件被引用为变量而不是作为字符串键来注册的,在
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
</template>
中可以使用顶层 await。结果代码会被编译成
async setup()
注意,async setup() 必须与 Suspense 组合使用,Suspense 目前还是处于实验阶段的特性
TIP
这个 FAQ 假定你已经有一些使用 Vue 的经验,特别是用选项式 API 使用 Vue 2 的经验。
组合式 API (Composition API) 是一系列
API 的集合
,使我们可以使用函数
而不是声明
选项的方式书写 Vue 组件。
其中涵盖了以下方面的 API:
响应式 API
:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子
:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。依赖注入
:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。
- ref:可以接受一个参数值并返回一个响应式且可改变的对象。
- defineProps:父传子,定义属性
- defineEmits:子传父
- defineExpose:明确要暴露出去的属性
- onMounted、onUnmounted:生命周期相关
- inject:注入