Was ist Vue.extend für?

Question

Das ist einfach genug, aber ich bekomme keine Antwort aus der Dokumentation. Ich bin dabei, Vue.js zu lernen, und ich verstehe nicht wirklich, wo Vue.extend passt. Ich bekomme Vue.component, aber ich sehe nicht, was Vue.extend tut, was Vue.component nicht tut . Ist es nur ein Legacy-Feature von 1.0? Wenn nicht, wo ist es in Vue 2.0 nützlich?

Answer 1

Ich denke, die Verwirrung ist, weil & Komponente erweitern eng verbunden sind. So erstellen Sie eine Komponente Vue Anrufe erweitern intern:

// register an options object (automatically call Vue.extend) 
Vue.component('my-component', { /* ... */ }) 

Daher können Sie erweitern verwenden, um eine Unterklasse der Basis Vue Konstruktor zu montieren (eine Komponente Konstruktor): https://vuejs.org/v2/api/#Vue-extend

Allerdings werden Sie kaum über oder Notwendigkeit kommen auf diese Straße gehen. Stattdessen verwenden Sie Komponenten, um benannte Unterklassen zu erhalten, die Sie in Ihrer Anwendung leicht referenzieren können.

Deshalb verlängern ist nicht wirklich ein „Erbe“ -Funktion, um es zu Vue Komponenten ist von zentraler Bedeutung, aber der Zusatz von Zucker, die Komponenten liefern sie den Standard-Weg machen Sie arbeiten werden.

Answer 2

Es führt in früheren Vuejs.org Website hatte ein Dokument.

Kopie von http://optimizely.github.io/vuejs.org/guide/composition.html, die von vuejs/Vuejs.org bei Version 0.10.6 von Vuejs gespalten ist.

Es ist wichtig, den Unterschied zwischen Vue.extend() und Vue.component() zu verstehen. Da Vue selbst ein Konstruktor ist, ist Vue.extend() eine Klassenvererbung Methode. Seine Aufgabe ist es, eine Unterklasse von Vue erstellen und den Konstruktor zurückgeben. Vue.component(), auf der anderen Seite ist eine Asset-Registrierung Methode ähnlich wie Vue.directive() und Vue.filter(). Seine Aufgabe ist es einen bestimmten Konstruktor mit einem String-ID zugeordnet werden, so Vue.js es bis in Vorlagen auswählen können. Wenn die Optionen direkt an Vue.component() übergeben werden, ruft sie Vue.extend() unter der Haube auf.

Vue.js unterstützt zwei verschiedene API-Paradigmen: die klassenbasierte, zwingend notwendig, Backbone-Stil-API und die Markup-basierte, deklarativen, Web Komponenten Stil API. Wenn Sie verwirrt sind, darüber nachdenken, wie können Sie mit new Image() ein Bildelement erstellen, oder mit einem <img>-Tag. Jeder ist in seinem eigenen Recht nützlich und Vue.js versucht, beide für maximale Flexibilität bereitzustellen.