哪种方式更好地创建 vue 组件（导出默认 vs defineComponent vs new Vue）答案

【问题标题】：Which way better to create vue component (export default vs defineComponent vs new Vue)哪种方式更好地创建 vue 组件（导出默认 vs defineComponent vs new Vue）
【发布时间】：2021-07-01 13:05:56
【问题描述】：

最近学习了 Vue.js，我对如何编写 vue 组件语法感到很困惑我一直在看 youtube 教程和文章，每个人都使用不同的方法。

就 vue 3 而言我们应该使用导出默认创建组件或导出默认的defineComponent 或新的 Vue({

那么如何决定如何创建 App 组件及其其余子组件和页面等的正确方法..

希望我的问题足够清楚。

谢谢

【问题讨论】：

标签： vue.js vue-component vuejs3

【解决方案1】：

如果您需要创建多个组件，我强烈建议您使用 Single File Components (SFC)

在这里你定义了一个新组件（在`<script>` 标签内）：

import { defineComponent } from 'vue'
export default defineComponent({
  // ...
})

（如果不使用 TypeScript，则为 export default {}）

对于主应用组件，您可以这样做：

import { createApp } from "vue";
const app = createApp(App)
app.mount('#app')

或者就这样，如果你不需要使用 vue-router、Vuex 等扩展 Vue。

import { createApp } from "vue";
createApp(App).mount('#app')

【讨论】：

谢谢，所以基本上如果不是打字稿，就不需要defineComponent。
怎么样，创建主App组件？
@SystemX 我在答案中添加了主应用组件，考虑使用 vue 脚手架解决方案，如 Vite 或 vue-cli
我们使用 vue-cli，我更喜欢 vite，但领导认为 rollup-sfc 是库组件的最佳选择

在这里你定义了一个新组件（在&lt;script&gt; 标签内）：

对于主应用组件，您可以这样做：

在这里你定义了一个新组件（在`<script>` 标签内）：