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

Question

我是vues js的新手,在学习它时会有一些问题.

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

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

Answer 1

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

一个好的方案是有一个主实例来控制你的应用程序,特别是如果你正在创建一个单页面应用程序(SPA).然后根据需要使用尽可能多的组件.

组件是重用代码并保持组织有序的好方法,使用Vue.js,可以非常轻松地在组件和"主"Vue实例之间进行通信.

Answer 2

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

1. 来自Vue docs:

所有Vue组件也是Vue实例,因此接受相同的选项对象(少数根特定选项除外).

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

2. 设计目标不同:

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

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

Answer 3

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

我在一个不是SPA的大型网络项目上工作.我们为应用程序的每个"孤岛"都有一个Vue实例.我们正在从一个大多数jQuery前端慢慢转换一个较旧的项目,因此它可能随着它的发展我们将能够压缩到一个Vue实例,但我们对多个实例没有任何问题.在现有项目中使用Vue的难易程度是在另一个库(例如react)上选择Vue的最大决定因素之一.

我采用了不同的绿色开发方法,一个实例和许多组件.

Answer 4

Vue实例可以与已存在的元素相关联并操纵它.

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