Differences between vue instance and vue component?

Question

I'm new to vue js and have some questions when learning it.

I'm now a little confused about the relationship between its instance and component. As far as I learned, every app build by vue should only have one instance and one instance only, it can have as many components as you like if needed. But recently I've seen a demo, and in that demo it has more than one instance.

So my question is, is that ok to have multiple intances in one app( the demo code works fine, but is that the correct way)? What's the best practice to use instance and component in vue app?

Answer 1

It's ok to have two instances in the same project, however, you probably don't want to do that.

A good scenario is to have one main instance to control your app, specially if you are creating a Single Page Application (SPA). Then use as many components as you want.

Components are a great way to reuse code and keep it organized, and, with Vue.js, is very easy to communicate between your components and your "main" Vue instance.

Answer 2

It depends very much on your situation.

I work on a large web project which is not an SPA. We have a Vue instance for each "silo" of the application. We are slowly transitioning an older project from a mostly jQuery frontend so it's possible that as it evolves We'll be able to condense down to a single Vue instance but we're having no trouble with multiple instances. The ease of using Vue in existing projects was one of the biggest deciding factors in choosing it over another library such as react.

I have taken a different approach with green development, one instance and many components.

Answer 3

There are something in common, and some difference between Vue instance and Vue component.

1. From Vue docs:

all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).

The root Vue instances accept properties like el, router, the Vue components cannot. The data property in root Vue instances is an object, but in Vue components must be a function.

2. The design target is different:

A root Vue instance is a Vue application launcher, Vue component is an extension of the Vue instance.

Vue components can create elements to be reused in many places. This is Vue characteristic of componentization mainly reflect point.

Answer 4

Vue instance can associated with and manipulate an element which is already exist.

Vue component more suitable for create new element and reuse it at anywhere.

Answer 5

Think of a Vue Component as a blueprint or set of rules on how to create something that can be inserted into the DOM that the user can interact with.

So when you create a Vue file you are going to define exactly one component with a set of rules that tells Vue how to display stuff on the screen and tells a user how to interact with it.

On the other hand is a Vue instance, its an instance of a Vue component, it represents something that has been inserted into the DOM and is something that a user can interact with.

If you have a background in Object-Oriented Programming, think of a Vue Component as being like a class and a Vue instance as an instance of that class.

Answer 6

What has not been mentioned in previous answers that I will cover in regards to the difference between Vue instance and Vue component is how we define the data property that we are working with.

If we are working with a Vue instance, then we can define the data property as an object or a function that returns an object like so:

With a Vue Component that data property must be a function that returns an object.

So for example this is a Vue component:

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

And if we want to make use of data inside of that Vue component, we have to make a function that returns an object.

Answer 7

Vue components extends Vue instances

but Vue instances accept properties like el, router, the Vue components cannot.

---

best practice:

one Vue instance

many Vue component