文章目录
vue3语法糖详解 三种写法
第一种写法,跟过去 Vue2 的写法是一样的,所以我们不过多介绍。
第二种写法,所有的对象和方法都需要 return 才能使用,太啰嗦。除了旧项目,可以用这种方式体验 Vue3 的新特性以外。
第三种写法,<script setup>
本质上是第二种写法的语法糖,掌握了这种写法,其实第二种写法也基本上就会了。(又多了一个不学第二种写法的理由)。
先对比一下setup()、<script setup>
的写法对比
最基本的 Vue2 写法
<template>
<div>{
{
count }}</div>
<button @click="onClick">
增加 1
</button>
</template>
<script>
export default {
data() {
return {
count: 1,
};
},
methods: {
onClick() {
this.count += 1;
},
},
}
</script>
组合式 API:setup()
这是很多初学者常用的写法,为了更简洁的代码推荐学习下面第三个方法
<script setup>
基本使用
setup() 钩子是在组件中使用组合式 API 的入口,通常只在以下情况下使用:
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
我们可以使用响应式 API 来声明响应式的状态,在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性:
<script>
import {
ref } from 'vue'
export default {
setup() {
const count = ref(0)
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
},
mounted() {
console.log(this.count) // 0
}
}
</script>
<template>
<button @click="count++">{
{
count }}</button>
</template>
-
在模板中访问从 setup 返回的 ref 时,它会自动浅层解包,因此你无须再在模板中为它写 .value。当通过 this 访问时也会同样如此解包。
-
setup() 自身并不含对组件实例的访问权,即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值,但反过来则不行。
扫描二维码关注公众号,回复: 15852943 查看本文章 -
setup() 应该同步地返回一个对象。唯一可以使用 async setup() 的情况是,该组件是 Suspense 组件的后裔。
访问 Props
setup 函数的第一个参数是组件的 props。和标准的组件一致,一个 setup 函数的 props 是响应式的,并且会在传入新的 props 时同步更新。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
请注意如果你解构了 props 对象,解构出的变量将会丢失响应性。因此我们推荐通过 props.xxx 的形式来使用其中的 props。
如果你确实需要解构 props 对象,或者需要将某个 prop 传到一个外部函数中并保持响应性,那么你可以使用 toRefs() 和 toRef() 这两个工具函数:
import {
toRefs, toRef } from 'vue'
export default {
setup(props) {
// 将 `props` 转为一个其中全是 ref 的对象,然后解构
const {
title } = toRefs(props)
// `title` 是一个追踪着 `props.title` 的 ref
console.log(title.value)
// 或者,将 `props` 的单个属性转为一个 ref
const title = toRef(props, 'title')
}
}
Setup 上下文
传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值:
export default {
setup(props, context) {
// 透传 Attributes(非响应式的对象,等价于 $attrs)
console.log(context.attrs)
// 插槽(非响应式的对象,等价于 $slots)
console.log(context.slots)
// 触发事件(函数,等价于 $emit)
console.log(context.emit)
// 暴露公共属性(函数)
console.log(context.expose)
}
}
该上下文对象是非响应式的,可以安全地解构:
export default {
setup(props, {
attrs, slots, emit, expose }) {
...
}
}
attrs 和 slots 都是有状态的对象,它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们,并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外还需注意,和 props 不同,attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用,那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。
暴露公共属性
expose 函数用于显式地限制该组件暴露出的属性,当父组件通过模板引用访问该组件的实例时,将仅能访问 expose 函数暴露出的内容:
export default {
setup(props, {
expose }) {
// 让组件实例处于 “关闭状态”
// 即不向父组件暴露任何东西
expose()
const publicCount = ref(0)
const privateCount = ref(0)
// 有选择地暴露局部状态
expose({
count: publicCount })
}
}
<script setup>
<script setup>
是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 <script>
语法,它具有更多优势:
- 更少的样板内容,更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和自定义事件。
- 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
- 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
基本语法
要启用该语法,需要在 <script>
代码块上添加 setup 属性:
顶层的绑定会被暴露给模板
当使用 <script setup>
的时候,任何在 <script setup>
声明的顶层的绑定 (包括变量,函数声明,以及 import 导入的内容) 都能在模板中直接使用,import 导入的内容也会以同样的方式暴露。
<script setup>
import {
capitalize } from './helpers'
// 变量
const msg = 'Hello!'
// 函数
function log() {
console.log(msg)
}
</script>
<template>
<button @click="log">{
{
msg }}</button>
<div>{
{
capitalize('hello') }}</div>
</template>
响应式 ref、reactive
响应式状态需要明确使用响应式 API 来创建。和 setup() 函数的返回值一样,ref 在模板中使用的时候会自动解包:
<script setup>
import {
ref , reactive } from 'vue'
const count = ref(0)
const data = reactive({
a:1,
b:2,
})
</script>
<template>
<button @click="count++">{
{
count }}</button>
<button @click="count++">{
{
data.a}}</button>
</template>
使用组件
这里 MyComponent 应当被理解为像是在引用一个变量。如果你使用过 JSX,此处的心智模型是类似的。其 kebab-case 格式的
<my-component>
同样能在模板中使用——不过,我们强烈建议使用 PascalCase 格式以保持一致性。同时这也有助于区分原生的自定义元素。
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<MyComponent />
</template>
动态组件
由于组件是通过变量引用而不是基于字符串组件名注册的,在 <script setup>
中要使用动态组件的时候,应该使用动态的 :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 的组件可以在其模板中用 <FooBar/>
引用它自己。请注意这种方式相比于导入的组件优先级更低。如果有具名的导入和组件自身推导的名字冲突了,可以为导入的组件添加别名:
import {
FooBar as FooBarChild } from './components'
命名空间组件
可以使用带 . 的组件标签,例如 <Foo.Bar> 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用:
<script setup>
import * as Form from './form-components'
</script>
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>
props和emits 使用 defineProps() 和 defineEmits()
defineEmits => 组件向外暴露的自定义方法
defineProps => 组件可以传入的值
为了在声明 props 和 emits 选项时获得完整的类型推导支持,我们可以使用 defineProps 和 defineEmits API,它们将自动地在 <script setup>
中可用:
使用 props 时,同样注意不要使用解构的方式,会失去响应式
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
</script>
-
defineProps 和 defineEmits 都是只能在
<script setup>
中使用的编译器宏。他们不需要导入,且会随着<script setup>
的处理过程一同被编译掉。 -
defineProps 接收与 props 选项相同的值,defineEmits 接收与 emits 选项相同的值。
-
defineProps 和 defineEmits 在选项传入后,会提供恰当的类型推导。
-
传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的作用域。因此,传入的选项不能引用在 setup 作用域中声明的局部变量。这样做会引起编译错误。但是,它可以引用导入的绑定,因为它们也在模块作用域内。
针对类型的 props/emit 声明
props 和 emit 也可以通过给 defineProps 和 defineEmits 传递纯类型参数的方式来声明:
const props = defineProps<{
foo: string
bar?: number
}>()
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
// 3.3+:另一种更简洁的语法
const emit = defineEmits<{
change: [id: number] // 具名元组语法
update: [value: string]
}>()
defineExpose() 组件向外暴露的自身的属性和方法
使用 <script setup>
的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在 <script setup>
中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup>
组件中要暴露出去的属性:
<script setup>
import {
ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
当父组件通过模板引用的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
下面是defineExpose() 的一个例子
注意调用子组件是ref的使用
<!-- 子组件 -->
<template>
<h1>子组件</h1>
<div class="input-group">
<input type="text" v-model="val">
<button @click="handle">添加</button>
</div>
</template>
<script setup>
import {
ref } from 'vue';
const val = ref('')
const demo = ref('zkj')
const list = ref(['默认测试数据!'])
const handle = () => {
list.value.push(val.value);
}
defineExpose({
msg:list, demo:demo,handle:handle})
</script>
<!-- 父组件 -->
<template>
<Child ref="childRef"/>
<h1>父组件</h1>
<h1>{
{
childRef.demo}}</h1>
<ul class="list">
<li class="list-item"
v-for="(item, index) in childRef?.msg" :key="index">
{
{
item }}
</li>
</ul>
<button @click="childRef.handle()">banniu </button>
</template>
<script setup>
import {
ref } from 'vue';
import Child from './components/Child.vue';
const childRef = ref("");
</script>
defineOptions()
这个宏可以用来直接在 <script setup>
中声明组件选项,而不必使用单独的 <script>
块:
<script setup>
defineOptions({
inheritAttrs: false,
customOptions: {
/* ... */
}
})
</script>
- 仅支持 Vue 3.3+。
- 这是一个宏定义,选项将会被提升到模块作用域中,无法访问
<script setup>
中不是字面常数的局部变量。
useSlots() 和 useAttrs()
在 <script setup>
使用 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 中使用。
顶层 await
<script setup>
中可以使用顶层 await。结果代码会被编译成 async setup():
另外,await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。
<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
泛型
可以使用
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>
generic 的值与 TypeScript 中位于 <…> 之间的参数列表完全相同。例如,您可以使用多个参数,extends 约束,默认类型和引用导入的类型:
<script
setup
lang="ts"
generic="T extends string | number, U extends Item"
>
import type {
Item } from './types'
defineProps<{
id: T
list: U[]
}>()
</script>
限制
由于模块执行语义的差异,<script setup>
中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候,对于开发者和工具来说都会感到混乱。因此,<script setup>
不能和 src attribute 一起使用。