vue3 defineOptions教程
项目推荐依赖：
- vue@^3.3
- volar / vue-tsc@^1.6.4
- vite@^4.3.5
- @vitejs/plugin-vue@^4.2.0
- vue-loader@^17.1.0 (if using webpack or vue-cli)
<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
优势：
- 更少的样板内容，更简洁的代码。
- 能够使用纯 TypeScript 声明 props 和自定义事件。
- 更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。
- 更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。
但是，这里存在一个问题，当我们想使用 mounted时钩子函数时，会报错，因为 <script setup>会将所有的代码都放在 setup函数中，而 mounted是在 setup函数之后执行的，所以会报错。
此外某些场景缓存页面数据，可能需要设置组件名称 name。
看一组代码：
<script>
export default {
name: 'HelloWorld',
mounted() {
console.log('mounted')
},
}
</script>
<script setup>
import {
onMounted } from 'vue'
onMounted(()=>{
console.log('onMounted')
})
</script>
这里使用了两个 script 标签。
api defineOptions的更新，让我们可以更方便的使用 <script setup>，而不用再使用两个 script 标签。
<script setup>
import {
onMounted } from 'vue'
defineOptions({
name: 'HelloWorld',
mounted() {
console.log('mounted')
},
})
onMounted(()=>{
console.log('onMounted')
})
</script>