【Vue3】defineOptions

一、引入

背景说明：

有 <script setup> 之前，如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。

但是用了 <script setup> 后，就没法这么干了 setup 属性已经没有了，自然无法添加与其平级的属性。

---

为了解决这一问题，引入了 defineProps 与 defineEmits 这两个宏。最终编译出来了这两个配置项，但这只解决了 props 与 emits 这两个属性。

如果我们要定义组件的 name 或其他自定义的属性，还是得回到最原始的用法——再添加一个普通的

这样就会存在两个 <script> 标签。让人无法接受。

<script>
// 组件名必须要为多个单词
export default {
  name: 'LoginIndex'
}
</script>

<script setup>
</script>

<template>
  <div>
    我是登录页
  </div>
</template>

---

二、解决方案

所以在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义，主要是用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项， props, emits, expose, slots 除外（因为这些可以使用 defineXXX 来做到，这些已经存在了）

<script setup>
defineOptions({
  name: 'LoginIndex'
})
</script>

<template>
  <div>
    我是登录页
  </div>
</template>