[script-setup] Why not output defineComponent?

[wenfangdu]

RFC Link

Source code:

<script setup>
  // imported components are also directly usable in template
  import Foo from './Foo.vue'
  import { ref } from 'vue'

  // write Composition API code just like in a normal setup()
  // but no need to manually return everything
  const count = ref(0)
  const inc = () => {
    count.value++
  }
</script>

<template>
  <Foo :count="count" @click="inc" />
</template>

Compiled output:

import Foo from './Foo.vue'
import { ref } from 'vue'

//            👇 no `defineComponent` here, why?
export default {
  setup() {
    const count = ref(1)
    const inc = () => {
      count.value++
    }

    return function render() {
      return h(Foo, {
        count,
        onClick: inc,
      })
    }
  },
}

[ShGKme]

For objects defineComponent does nothing in runtime and is useful only for development tools and IDE (useless in generated code).

https://github.com/vuejs/vue-next/blob/4781965cc2396b51028a05917a3b057f884bc0b7/packages/runtime-core/src/apiDefineComponent.ts#L184

[wenfangdu]

Adding lang="ts" does output defineCompoent, can it be counted as a minor bug? Since it's useless in the generated code.

[edison1105]

The purpose of using defineComponent is to improve the support for TypeScript.

[wenfangdu]

Adding lang="ts" does output defineCompoent.

[edison1105]

defineComponent的目的是为了在开发的过程中配合IDE获得更好的ts类型提示。例如当你输入 this. 时会提示你定义的props,data,method等。但是编译出来的产物是不需要类型提示的，因为我们并不修改编译后的代码。

[wenfangdu]

@edison1105 多谢解答，那么加上 lang="ts" 会输出 defineComponent 算不算是小 bug 呢？因为它对编译后的代码来讲是没用的。

[edison1105]

即便是对编译后的代码没用。不能算是bug。