Multi tool use

Differences between vue instance and vue component?

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?

4 Answers
4

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.

data

data

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.

silo

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.

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

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.

el

router

data

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.