vue3 defineOptions教程

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>