La documentation de Vue v2 est un peu maigre sur Vue.extends mais en bref :
Vous utilisez Vue.extend pour créer un composant définition (appelé "constructeur de composant" dans l'ancienne documentation) et Vue.component à enregistrez afin qu'il puisse être utilisé dans le modèle pour créer le composant. instance .
<div id="example">
<my-component></my-component>
</div>
// define
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
el: '#example'
})
Cependant, partout dans l'API Vue où vous pouvez passer le "constructeur de composant" créé par Vue.extend vous pouvez passer un objet simple à la place et il appellera Vue.extend pour vous .
L'exemple précédent peut donc être écrit comme suit
// define
var MyComponent = {
template: '<div>A custom component!</div>'
}
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
el: '#example'
})
Il semble que les gens préfèrent maintenant définir les composants comme de simples objets JS (appelés objet options dans le monde de Vue).
Vous pouvez constater que dans la documentation actuelle de Vue v2, on voit rarement Vue.extends mentionné alors que dans les docs de la v1 il est clairement expliqué dans un des premiers chapitres qui décrit Instance Vue (comparer avec v2 ) et très bien expliqué dans Composants chapitre. Il est explicitement indiqué que le passage direct d'un objet d'options est juste un sucre .
Je pense que, pour rester simple et plus facile à apprendre, la nouvelle documentation utilise simplement des objets simples partout. Pourquoi expliquer des concepts supplémentaires tels que "Vue constructor function", "component constructor" et qu'est-ce que le "Vue constructor" ? Vue.extend alors que 99 % du temps, vous n'avez pas besoin de le comprendre ? Vous pouvez définir tous les composants de votre application à l'aide d'objets d'options JS et d'objets de type enregistrez sans utiliser Vue.extends . Le seul endroit où vous devez utiliser la fonction constructeur de vue est lors de la création de Instance racine de Vue avec new Vue({...}) . Cela utilise la base Vue fonction constructeur. Vous n'avez pas besoin de savoir que Le constructeur Vue peut être étendu pour créer des constructeurs de composants réutilisables avec des options prédéfinies. parce que Bien que vous puissiez créer des instances étendues de manière impérative, dans la plupart des cas, vous enregistrerez un constructeur de composant en tant qu'élément personnalisé et les composerez dans des modèles de manière déclarative. ( source )
Les auteurs de la documentation ont donc décidé que vous n'aviez pas besoin d'apprendre à connaître Vue.extends . Mais existe-t-il des cas d'utilisation où il est utile d'utiliser Vue.extend au lieu d'un simple options objet ?
Oui.
Tapuscrit
Si vous voulez utiliser Typescript (et que vous n'aimez pas style de classe ), alors pour avoir une inférence de type correcte, il faut devrait utiliser Vue.extend au lieu d'objets ordinaires. Il utilise ThisType<T> fonctionnalité pour obtenir une inférence appropriée pour this objet.
![image showing code with Vue.extend function where we see it's recognized by Typescript]()
Héritage des composants (et encore Typescript)
Vous pouvez utiliser .extend pas seulement sur la base Vue mais aussi sur votre composant personnalisé. Ceci est moins flexible que mixins parce que vous pouvez utiliser de nombreux mixins dans les composants et les .extend Cette approche ne fonctionne qu'avec un seul composant. Toutefois, elle fonctionne mieux avec Typescript pour lequel les mixins semblent ne pas bien jouer . Avec .extend La prise en charge de Typescript est probablement "suffisante" dans de nombreux cas. Vous pouvez accéder aux champs d'un composant hérité, mais si votre composant a des noms en collision avec le composant "de base", cela ne fonctionne pas bien (par exemple, j'ai un type de never pour des noms d'accessoires contradictoires).
<div id="appBar">
{{fooMessage}} || {{barMessage}} || {{ additionalData}}
<button v-on:click="changeAllMessages">Change</button>
</div>
var FooComponent = Vue.extend({
data: () => ({
fooMessage: 'Foo message'
}),
methods: {
changeFooMessage() {
this.fooMessage = "Foo message changed";
}
}
})
var BarComponent = FooComponent.extend({
data: () => ({
barMessage: "Bar message",
}),
methods: {
changeAllMessages() {
this.barMessage = "Bar message changes";
this.changeFooMessage();
}
}
});
new BarComponent({ el: "#appBar", data: { additionalData: "additional data passed" } });
Ici, j'ai également montré que vous pouvez utiliser votre composant personnalisé pour créer Instance racine de Vue ( new BarComponent({...}) ). Comme vous pouvez le faire avec new Vue({...}) . Peut-être que ce n'est pas très utile mais cela montre que BarComponent et FooComponent sont juste étendu base Vue et vous pouvez l'utiliser de la même manière que vous le feriez avec les fonctions du constructeur Vue .
0 votes
stackoverflow.com/questions/31709462/