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

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

我现在对其实例和组件之间的关系有些困惑。据我了解,每个由vue构建的应用程序都应该只有一个实例和一个实例,如果需要,它可以具有任意多个组件。但是最近我看了一个演示,在该演示中有多个实例。

所以我的问题是,可以在一个应用程序中包含多个实例吗(演示代码可以正常工作,但是这是正确的方法)吗?在vue应用中使用实例和组件的最佳实践是什么?

蛋蛋飞云2020/03/12 15:58:58

Vue组件extendsVue实例

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


最佳实践:

一个Vue实例

many Vue component

猴子Harry2020/03/12 15:58:58

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

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

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

Eva前端2020/03/12 15:58:58

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

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

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

老丝GO2020/03/12 15:58:58

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

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

西门泡芙Jim2020/03/12 15:58:58

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

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

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

例如,这是一个Vue组件:

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

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

宝儿猿2020/03/12 15:58:58

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

  1. Vue docs

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

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

  1. 设计目标是不同的:

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

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

西门泡芙Jim2020/03/12 15:58:58

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

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

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

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