初始化 Vue 应用程序的正确方法是什么？

Question

我正在学习Vue，并看到了许多不同的示例应用程序、文档和操作方法。人们似乎有很多不同的方式来初始化他们的组件，然后将它们安装到他们的应用程序中。

我的问题是为什么有这么多方法？这方面的最佳实践是什么？

作为参考，我通过npm进行构建，而不是通过HTML文件中包含的库进行构建。

选项1

const app = new Vue({
el: '#app',
data: function(){
}
});

选项2

export default {
name: "Test",
data() {

}
};

选项3

const app = Vue.createApp({})
// Define a new global component called button-counter
app.component('button-counter', {
data() {
return {
count: 0
}
}
})
app.mount('#components-demo')

例如，选项3来自Vue文档，但当我以这种方式初始化应用程序时，会出现Vue不存在的错误。

希望我自己和任何其他在这个问题上遇到困难的初学者都能弄清楚。

Answer 1

• 选项1是Vue 2创建实例的方法
  

• 选项3是Vue 3方式。

• 选项2不初始化新的Vue实例

正确的实例化方式是自Vue3以来的createApp({})函数。新的Vue应用程序仅支持Vue 2。

`export default {
name: "Test",
data() {}
};`

以上是创建名为Test的组件的一种方法。由于Vue3，您也可以创建一个具有defineComponent({})功能的组件以及

更多信息->https://v3.vuejs.org/guide/instance.html