Vue3学习（Vue3.3新特性——defineOptions宏）

目录

一、Vue3.3新特性——defineOptions宏。

（1）背景介绍与探讨。(详细)

（2）defineOptions宏函数。

---

一、Vue3.3新特性——defineOptions宏。

（1）背景介绍与探讨。(详细)

• 在 <script setup> 出现之前，Vue3还是通过一个setup(){...}选项去写代码。

---

• 在使用 <script setup> 后，整个script都被setup占满了。这就意味着setup属性没有了，就没有办法为其添加相应的平级属性(如props、emits等等)。

---

• 这就让对应的生命周期函数、computed计算属性、watch侦听器等都是对应成Vue3组合式API里的专门函数。
• 为了解决属性props、emits的配置问题，就引入了对应的 defineProps(接收父传子的数据)、defineEmit(进行子传父) 这两个宏函数！其实底层也是最终编译出对应的配置项props、emits。具体学习可以看博主之前的博客：Vue3学习（组合式API——父、子组件间通信详解）-CSDN博客。

---

• 但如果需要定义组件的name属性或其他的自定义属性，还是得回到最原始的方法——再添加一个普通的<script>标签。这样就会存在两个<script>标签，让人还是无法接受！
• 可以演示一下具体情况。在src目录下新建一个views目录，在该目录下新建两个子目录(login、register)。两个子目录下分别新建index.vue组件。这时就需要写两个<script>标签，一个用于属性name，另外一个就是setup。

---

（2）defineOptions宏函数。

1. 根据上方的背景介绍下就在Vue3.3新引入了 defineOptions 宏。
2. 所以 defineOptions 就是用来定义 Option API 的选项。可以使用 defineOptions 定义任意的选项！
3. 为 <script setup> 提供选项式 API 风格的组件元信息声明，即允许在组合式 API 中直接定义 name、inheritAttrs 等选项，无需额外导出 export default {}。

---

• 其中props、emits、expose（defineExpose）、slots除外。因为这些可使用提供的专用 defineXXX 来完成。关于 defineExpose 宏的使用可以在博主博客中了解！Vue3学习（组合式API——ref模版引用与defineExpose编译宏函数）-CSDN博客

---

• 现在就可以修改之前写两个<script>标签并定义name组件名的代码了。

<!--<script>
export default {name: 'LoginIndex'
}
</script>--><script setup>
defineOptions({name: 'LoginIndex'
})
</script><template><div>我是登录页</div>
</template><style scoped></style>

<script>
/*export default {name: 'RegisterIndex'
}*/
</script><script setup>
defineOptions({name: 'RegisterIndex'
})
</script><template><div>我是注册页</div>
</template><style scoped></style>