Question

我是vue js的新手，在学习它时会有一些问题。

我现在对它的实例和组件之间的关系感到有点困惑。据我所知，每个由vue构建的应用程序应该只有一个实例和一个实例，如果需要，它可以拥有任意数量的组件。但是最近我看过一个演示，在那个演示中它有不止一个实例。

所以我的问题是，在一个应用程序中有多个intances是可以的（演示代码工作正常，但这是正确的方法）？在vue app中使用实例和组件的最佳做法是什么？

Answer 1

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

一个好的方案是让一个主实例来控制你的应用程序，特别是如果你要创建一个单页面应用程序（SPA）。然后根据需要使用尽可能多的组件。

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

Answer 2

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

我在一个不是SPA的大型网络项目上工作。我们为每个＆＃34; silo＆＃34;提供了一个Vue实例。申请。我们正在慢慢地从一个大多数jQuery前端转换一个较旧的项目，因此它可能随着它的发展我们能够压缩到一个Vue实例但我们对多个实例没有任何问题。在现有项目中使用Vue的难易程度是选择另一个库（例如react）的最大决定因素之一。

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

Answer 3

有一些共同点，Vue实例和Vue组件之间存在一些差异。

来自Vue docs：

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

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

设计目标不同：

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

Vue组件可以创建在许多地方重用的元素。这是组件化的Vue特征主要反映点。

Answer 4

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

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

Answer 5

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

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

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

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

Answer 6

Vue组件`Where()` Vue实例

但是Vue实例接受extends，el之类的属性，而Vue组件则不能。

最佳做法：

一个Vue实例

许多Vue组件

Answer 7

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

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

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

例如，这是Vue组件：

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

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

vue实例和vue组件之间的区别？

7 个答案:

Vue组件`Where()` Vue实例

最佳做法：

vue实例和vue组件之间的区别？

7 个答案:

Vue组件Where() Vue实例

最佳做法：

Vue组件`Where()` Vue实例