vue3语法糖详解（setup()、＜script setup＞）

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 暴露的值，但反过来则不行。

• 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 一起使用。