面试宝典--script setup 是做什么的?

116 阅读2分钟

scrtpt setup 是 vue3 的语法糖,简化了组合式 API 的写法,并且运行性能更好。在 setup 函数中,所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。相对之前的写法,语法更简单。

1.自动注册属性和方法无需返回,直接使用。

1.<script setup> 语法糖并不是新增的功能模块,它只是简化了以往的组合API的必须返回(return)的写法,并且有更好的运行时性能。

2.在 setup 函数中:所有 ES 模块导出都被认为是暴露给上下文的值,并包含在 setup() 返回对象中。使用方式:在 script 标签加上 setup 关键字即可

2.组件自动注册

在 script setup 中,引入的组件可以直接使用,无需再通过components进行注册,并且无法指定当前组件的名字,它会自动以文件名为主,也就是不用再写name属性了。

3.defineProps 和 defineEmits

1.defineProps

defineProps ----> [用来接收父组件传来的 props]

2.defineEmits

defineEmit ----> [子组件向父组件事件传递]

使用defineEmit定义当前组件含有的事件,并通过返回的上下文去执行 emit。

  • 子组件通过 defineProps 接收父组件传过来的数据
  • 子组件通过 defineEmits 定义事件发送信息给父组件

4.useSlots() 和 useAttrs()

  1. useAttrs:这是用来获取 attrs 数据,但是这和 vue2 不同,里面包含了 class属性方法
  2. useSlots: 顾名思义,获取插槽数据

5.defineExpose API

defineExpose ----> [组件暴露出自己的属性]

<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去,可以使用 defineExpose

6.新增指令v-memo

(待整理)

7.style v-bind

(待整理)

8.定义组件其他配置

(待整理)