Interprétation détaillée de la technologie de reconstruction de vue

Cet article présente principalement les points clés et un résumé de la technologie de reconstruction du projet Vue. Je vais maintenant le partager avec vous et vous donner une référence.

Avant-propos

J'ai été trop occupé ces derniers temps et mon blog n'a pas été mis à jour depuis longtemps. Prenant une pause dans mon emploi du temps chargé aujourd'hui, je voudrais résumer brièvement certains des points techniques de la récente reconstruction du projet Vue.

Les données de vue sont mises à jour, mais la vue n'est pas mise à jour

Nous rencontrons souvent ce problème, généralement lorsque les données de vue sont attribuées, les données de vue changent, mais le la vue n'est pas mise à jour. Ce n'est pas le point technique de la reconstruction d'un projet. Partageons avec vous la solution habituelle de vue2.0 !

La solution est la suivante :

1. Attribuez une valeur via la méthode vue.set

Vue.set(数据源, key, newValue)

2 via Array.prototype.splice. method

Data source.splice(indexOfItem, 1, newValue)

3. Modifier la longueur des données

Data source.splice(newLength)

4. Méthode de mutation

Vue.js encapsule les méthodes de mutation du tableau observé, afin qu'elles puissent déclencher des mises à jour de vue. Les méthodes encapsulées sont :

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

application de tableau d'objets prop

En JavaScript, les objets et les tableaux sont des types de référence, pointant vers le même espace mémoire Si prop est. Un objet ou un tableau qui change à l'intérieur du composant enfant affecte l'état du composant parent. En profitant de cela, lorsque nous modifions le tableau ou l'objet prop dans le composant enfant, le composant parent et tous les endroits où les données dans le prop sont appliquées changeront. J'ai déjà écrit un article sur la copie profonde et la copie superficielle js. Si vous êtes intéressé, jetez-y un œil. En fait, les principes sont les mêmes.

Le cas est le suivant :

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

Partout appliqué à itemData va changer !

Vue ne donnera pas d'avertissement dans la console pour le changement de prop ci-dessus. Si nous modifions complètement ou attribuons une valeur à prop, la console donnera un avertissement ! La solution officielle citée est la suivante :

1. Définissez une variable locale et initialisez-la avec la valeur de prop :

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

2. Définissez un attribut calculé, traitez la valeur de prop. et Retour :

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

Quelques pièges du v-model

En fait, le v-model et la synchronisation sont des sucres syntaxiques que je les ai présentés dans un article. avant, et le site officiel également Vous pouvez trouver des cas similaires !

Les données du modèle V ne signalent parfois pas d'erreur lorsqu'elles sont indéfinies, alors assurez-vous de noter que le modèle V ne peut pas être indéfini, sinon il y aura des problèmes inexplicables !

Refactoring - Création de composants dynamiques

Parfois, nous avons de nombreux composants similaires avec seulement une petite différence. Nous pouvons écrire de tels composants similaires dans le fichier de configuration, créer dynamiquement. et composants de référence

Méthode 1 : Utiliser le composant et est ensemble

En utilisant des éléments réservés et en liant dynamiquement leurs attributs is , vous pouvez basculer dynamiquement plusieurs composants sur le même support point :

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

Méthode 2 : Créer

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart via la méthode de rendu [_type]["attr"] est configurée dynamiquement. dans le fichier de configuration. Lorsque vous cliquez sur le type, il changera et l'attribut attr sous différents types sera pris !

Extraction d'attributs publics

Dans les projets, nous utilisons souvent beaucoup d'états ou de données. Nous pouvons extraire beaucoup de données publiques et les mettre dans un objet. , nous pourrons surveiller les modifications apportées à cet objet de données plus tard. Enregistrez ou obtenez des données.

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

Vous pouvez utiliser la surveillance de profondeur ci-dessus. S'il doit être exécuté immédiatement lors de l'initialisation, nous pouvons utiliser le suivi d'exécution immédiat !

exiger des dépendances chargées dynamiquement

Nous pouvons utiliser la fonction de synchronisation requise pour charger dynamiquement des dépendances dans le code. Par exemple, avec le thème echart ci-dessous, nous pouvons charger dynamiquement. quand on clique pour changer !

require("echarts/theme/"+ data.theme);

Le chargement de l'importation doit être placé dans la tête Lors de l'initialisation, vous pouvez importer le thème par défaut pour le charger !

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Obtenir la méthode de valeur du bouton radio sélectionné par défaut dans AngularJS (tutoriel détaillé)

Grâce à AngularJS Comment utiliser la radio pour implémenter l'une des deux options (tutoriel détaillé)

Interprétation complète de cli en vue (tutoriel détaillé)

Les détails sont as Votre interprétation des nouvelles fonctionnalités de vue-cli 3.0 (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!