What is Vue.extend for?

Question

This is a simple enough one, but I'm not getting the answer I need from the documentation. I'm in the process of learning Vue.js, and I don't really understand where Vue.extend fits in. I get Vue.component, but I don't see what Vue.extend does which Vue.component doesn't. Is it just a legacy feature from 1.0? If not, where is it useful in Vue 2.0?

Answer 1

Their guide in the previous Vuejs.org site had a document.

Copied from http://optimizely.github.io/vuejs.org/guide/composition.html which is forked from vuejs/Vuejs.org at version 0.10.6 of Vuejs.

It is important to understand the difference between Vue.extend() and Vue.component(). Since Vue itself is a constructor, Vue.extend() is a class inheritance method. Its task is to create a sub-class of Vue and return the constructor. Vue.component(), on the other hand, is an asset registration method similar to Vue.directive() and Vue.filter(). Its task is to associate a given constructor with a string ID so Vue.js can pick it up in templates. When directly passing in options to Vue.component(), it calls Vue.extend() under the hood.

Vue.js supports two different API paradigms: the class-based, imperative, Backbone style API, and the markup-based, declarative, Web Components style API. If you are confused, think about how you can create an image element with new Image(), or with an <img> tag. Each is useful in its own right and Vue.js tries to provide both for maximum flexibility.

Answer 2

In addition to the answers provided, there is a practical use case for calling Vue.extend() directly if you are using TypeScript.

It is recommended in most cases to import component definitions from other files when they are needed, instead of registering them globally with Vue.component(). It keeps things organized in larger projects and makes it easier to trace problems.

With the right library, TypeScript can look at your component definition and figure out what the type of the component will be when it's initialized, meaning it can then check the functions you've defined to see if they make sense (i.e. if you reference this.foo there is actually a prop, data field, computed value, or method named foo). If you use Vue.component() it will be able to do this, but not if you use the other typical way of making components available, which is exporting object literals.

However, another option is to export your component definitions wrapped in Vue.extend(). TypeScript will then be able to recognize it as a Vue component and run its type checking accordingly, but you won't have to abandon the best-practice pattern of exporting components rather than registering them globally.