CODEWITHSUNDEEP
vue.js
itbestdevelopment
itbestdevelopment

Reputation: 47

Differences between Vue.component and new Vue?

Please tell me what are the differences between Vue.component and new Vue.

  1. The second parameter of the Vue.component method ( the options object ), is the same first parameter of new Vue constructor. right?

  2. Are there any differences between two methods, in meaning and parameter options?

Thanks

Upvotes: 2

Views: 1038

Answers (2)

ma_jafari
ma_jafari

Reputation: 1059

Let's introduce both of them first and we'll talk about the difference after it.

What is New Vue?

using new Vue we create a new vue instance; Every Vue application starts by creating a new Vue instance with the Vue function like following:

var vm = new Vue({
  // you'r options here
})

According to official docs(this link):

A Vue application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components.

now that we know what vue instance is let's take a look at components.

What is Vue.component?

Components are reusable Vue instances with a name and we can use them as custom elements inside a root Vue instance

What are the differences?

  1. Since components are reusable Vue instances, they accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.
  2. A root Vue instance is a Vue application launcher, Vue component is an extension of the Vue instance.

Read this post for additional info.

Upvotes: 2

Sergeon
Sergeon

Reputation: 6788

When you call new Vue(), you're creating what is called a vue instance. A Vue instance basically is a JavaScript object that has some capabilities to interact with the DOM.

Vue components happen to be Vue instances, too. But the main difference is that components belong to other components/vue instances, while bare instances are mounted directly into an existing element of the DOM (with existing, I mean HTML that is not generated by Vue and existed previously to the instance creation).

So, basically, the main difference comes from the use: you usually create a bare Vue instance with new Vue when you need to attach that instance directly to the DOM as your root element. Vue components, on the other hand, are always attached to ** other components**.

In general, it is really common to have a single root vue instance in your Vue application, but you could have several bare instances in the same web page: you could get creative and span several Vue instances and make them interact with the DOM at the same time, as if they were components.

However, it is better to have a single root element with several components, since it is easier to reason about your code in that way, and also facilitates the use of plugins like Vuex or Vue-router.

Maybe this link about this matter can serve you as well.

Upvotes: 1

Related Questions