Quelles sont les différences entre extend et composant dans Vue ?-js tutoriel-php.cn

Quelles sont les différences entre extend et composant dans Vue ?

亚连

Libérer： 2018-06-19 16:13:21

original

2859 Les gens l'ont consulté

Cet article présente principalement les différences entre extend, composant, mixins et extends dans Vue. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

nouvelle Vue. ( ), composant

Nous nous mettons d'abord d'accord sur un objet d'options baseOptions, qui sera utilisé dans le code suivant.

let options = {
 template: &#39;<p>{{firstName}} {{lastName}} aka {{alias}}</p>&#39;,
 data: function () {
  return {
   firstName: &#39;Walter&#39;,
   lastName: &#39;White&#39;,
   alias: &#39;Heisenberg&#39;
  }
 },
 created(){
  console.log(&#39;onCreated-1&#39;);
 }
};

Copier après la connexion

nouveau Vue() source :vue/src/core/instance/index.js

Instancier un composant.

new Vue(baseOptions);
// -> onCreated-1
component source:vue/src/core/global-api/assets.js

Copier après la connexion

Vue.component est utilisé pour enregistrer ou obtenir Méthode des composants globaux, sa fonction est d'enregistrer (nom) le constructeur d'instance étendu généré par Vue.extend en tant que composant. Les composants enregistrés globalement peuvent être utilisés dans toutes les instances Vue construites après l'instruction d'enregistrement du composant

Vue.component(&#39;global-component&#39;, Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component(&#39;global-component&#39;, baseOptions);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component(&#39;my-component&#39;)

Copier après la connexion

<. 🎜>Lorsque nous avons besoin d'« étendre » ou de « mélanger » des options de base dans d'autres pages, Vue propose une variété de méthodes d'implémentation : extend, mixins, extends.

extend source:vue/src /core/global-api/extend.js

Vous pouvez étendre le constructeur Vue pour créer un constructeur de composants réutilisable avec des options prédéfinies. L'option mixins accepte un tableau de mixins. Ces objets d'instance mixin peuvent contenir des options tout comme les objets d'instance normaux, et ils seront fusionnés logiquement en utilisant les mêmes options dans Vue.extend() .

let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

Copier après la connexion

étend

C'est similaire aux mixins, la différence est que les options du composant lui-même seront supérieures à la source composant à étendre. La priorité.

C'est ce que dit le document officiel En plus de la priorité, il peut y avoir uniquement des types qui acceptent les paramètres.

new Vue({
 mixins: [baseOptions],
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

Copier après la connexion

D'après les résultats, les trois méthodes peuvent répondre aux exigences, mais les formes sont différentes

Vue.extend

Vue.extend crée simplement. un constructeur, il s'agit de créer des composants réutilisables.

new Vue({
 extends: baseOptions,
 created(){
  //do something
  console.log(&#39;onCreated-2&#39;);
 }
 //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

Copier après la connexion

Et ces trois méthodes utilisent des distinctions détaillées dans les scénarios, actuellement, je suis également confus...
//Différents exemples de plusieurs méthodes :

https://jsfiddle.net/willnewi...

Option stratégie de fusion d'objets Vue. config.optionMergeStrategies

Les objets d'option mentionnés ci-dessus sont fusionnés selon une certaine stratégie dans mergeOptions.

Imprimez Vue.config.optionMergeStrategies, vous verrez l'optionMergeStrategies par défaut comme suit :

mergeHook

sous-composant Les événements du cycle de vie du composant parent seront fusionnés dans un tableau. Le composant parent vient en premier et le composant enfant en dernier.

mergeAssets
Le délégué prototype est utilisé dans la méthode de fusion mergeAssets. Il va d'abord fusionner les attributs du composant parent. Les attributs sont placés sur la chaîne prototype du nouvel objet créé. attributs dans le nouvel objet

Résumé

Vue.component enregistre les composants globaux pour plus de commodité

Vue.extend crée le constructeur du composant, afin de réutiliser les

function extend (to, _from) {
 for (var key in _from) {
 to[key] = _from[key];
 }
 return to
}
function mergeAssets (parentVal, childVal) {
 var res = Object.create(parentVal || null);
 return childVal
 ? extend(res, childVal)
 : res
}

Copier après la connexion

mixins, extends afin d'étendre

Articles associés :
Comment utiliser axios pour implémenter la fonction de téléchargement d'images avec une barre de progression
Comment implémenter les données JSON optimisation des regroupements en Javascript

À propos de ce problème de pointage dans vue (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!