Vue组件extendsVue实例

但是Vue实例接受的属性如el，routerVue组件不能。

最佳实践：

一个Vue实例

many Vue component

在同一个项目中有两个实例是可以的，但是，您可能不想这样做。

一个好的方案是有一个主实例来控制您的应用程序，尤其是在创建单页应用程序（SPA）时。然后，根据需要使用尽可能多的组件。

组件是重用代码并使代码井井有条的好方法，并且使用Vue.js，可以非常轻松地在组件和“主” Vue实例之间进行通信。

这在很大程度上取决于您的情况。

我从事的不是SPA的大型网络项目。对于应用程序的每个“筒仓”，我们都有一个Vue实例。我们正在从一个主要是jQuery前端缓慢过渡一个较旧的项目，因此随着它的发展，我们有可能将其压缩为单个Vue实例，但是对于多个实例，我们没有任何麻烦。在现有项目中使用Vue的难易程度是选择它而不是其他库（例如react）的最大决定因素之一。

我对绿色开发采取了一种不同的方法，包括一个实例和许多组件。

Vue实例可以与已经存在的元素关联并对其进行操作。

Vue组件更适合于创建新元素并在任何地方重复使用。

关于Vue实例和Vue组件之间的区别，我在前面的答案中没有提到的是我们如何定义要使用的data属性。

如果我们正在使用Vue实例，则可以将data属性定义为对象或返回对象的函数，如下所示：

使用Vue组件时，数据属性必须是返回对象的函数。

例如，这是一个Vue组件：

export default {
  name: "App",
  components: {
    SearchBar,
    VideoList
  },

而且，如果我们想利用该Vue组件内部的数据，就必须创建一个返回对象的函数。

Vue实例和Vue组件之间有一些共同点，也有所不同。

1. 从Vue docs：

所有Vue组件也是Vue实例，因此接受相同的options对象（少数几个特定于root的选项除外）。

根的Vue实例接受样性质el，router中，Vue的部件不能。dataVue根实例中的属性是一个对象，但Vue中的组件必须是一个函数。

2. 设计目标是不同的：

根Vue实例是Vue应用程序启动器，Vue组件是Vue实例的扩展。

Vue组件可以创建要在许多地方重复使用的元素。这是Vue组件化的主要体现点。

将Vue组件视为关于如何创建可以插入到用户可以与之交互的DOM中的蓝图或规则集。

因此，当您创建Vue文件时，您将使用一组规则定义一个组件，该规则告诉Vue如何在屏幕上显示内容并告诉用户如何与之交互。

另一方面是Vue实例，它是Vue组件的实例，它表示已插入DOM中并且可以与用户进行交互的对象。

如果您有面向对象编程的背景知识，可以将Vue组件视为类，将Vue实例视为该类的实例。