初始化 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 实例

实例化的正确方法是自 Vue 3 以来的createApp({}) function。新的 Vue 应用程序仅支持 Vue 2。

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

以上是创建名为 Test 的组件的一种方法。 由于 Vue3 或者您可以使用defineComponent({}) function 创建一个组件

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