Comment résoudre le détournement de données de vue

Comment résoudre le détournement de données Vue ?

Vue est un framework frontal très populaire, souvent utilisé pour le développement de SPA (application à page unique). L'une de ses fonctionnalités principales est la liaison de données (pilotée par les données), qui utilise la liaison de données pour implémenter des composants. développement.

La liaison de données est l'une des fonctionnalités principales du framework Vue. Vue utilise la technologie de piratage de données pour réaliser une liaison de données bidirectionnelle. Dans Vue, si nous modifions les données dans le modèle de données, la vue se mettra automatiquement à jour, et vice versa. Mais comment résoudre les problèmes causés par le détournement de données ?

Le principe du détournement de données Vue

Lorsque Vue utilise la liaison de données bidirectionnelle, les données seront détournées. Par exemple, nous utilisons une double parenthèse ({{}}. dans le modèle) pour lier les données, comme indiqué ci-dessous :

<div>
  {{message}}
</div>

Dans Vue, cette méthode de liaison est appelée "liaison de modèle", puis Vue compilera tout cela dans la "phase de compilation du modèle" Chaque liaison La méthode est remplacée par du code JavaScript, comme indiqué ci-dessous :

var data = { message: 'Hello,Vue!' };  
var app = new Vue({
  el: '#app',
  data: data
});

Ce code transférera toutes les propriétés de l'objet de données que nous avons défini vers l'instance Vue, puis exécutera le code suivant :

Object.keys(data).forEach(key => {
  proxyData(this, key, data[key]);
});

Parmi elles, la méthode proxyData est une méthode personnalisée, principalement utilisée pour réaliser un détournement de données. Le détournement de données se reflète principalement dans les objets d'instance Vue.

Le processus de détournement spécifique est le suivant :

1. Vue utilisera la méthode Object.defineProperty() pour détourner toutes les propriétés de l'objet de données.

function proxyData (vm, key, val) {
  Object.defineProperty(vm, key, {
    configurable: false,
    enumerable: true,
    get () {
      console.log(`get ${val}`);
      return val;
    },
    set (newVal) {
      console.log(`set ${newVal}`);
      val = newVal;
      // 触发diff算法 - 更新页面
      vm.$nextTick(() => {
        // 触发更新
      });
    }
  });
}

2. Dans la fonction get, Vue ajoutera l'objet observateur à la file d'attente des abonnés. Lorsque les données changent, l'objet observateur est averti et met à jour l'interface utilisateur.
3. Dans la fonction set, Vue informera l'objet observateur de la modification des données et l'objet observateur restituera l'interface utilisateur.
4. Vue utilise le DOM virtuel (Virtual DOM) pour réaliser des opérations DOM efficaces, évitant ainsi les goulots d'étranglement de performances causés par les opérations directes sur le DOM.

Problèmes liés au piratage de données Vue

Bien que Vue implémente une liaison de données bidirectionnelle via le piratage de données, cette méthode pose également quelques problèmes.

1. Le nouvel attribut de l'objet ne peut pas être surveillé

Nous avons constaté lors de l'utilisation de Vue que si nous ajoutons un nouvel attribut à l'objet dans le modèle de données, alors cette propriété ne peut pas être observée, ce qui signifie que la modification de cette propriété ne déclenchera pas le nouveau rendu de la vue. Seules les propriétés qui existent lorsque l'objet est initialisé peuvent être observées.

var app = new Vue({
  el: '#app',
  data: {
    obj: { a: 1, b: 2 }
  }
});

// 需要新增c属性
app.obj.c = 3;

// 修改c属性，视图不会更新
app.obj.c = 4;

2. Les opérations sur le tableau ne peuvent pas être surveillées

Vue ne peut pas surveiller les modifications du tableau, telles que les opérations push, pop, shift et unshift. apportez des modifications à l'aide des méthodes spéciales fournies par Vue, telles que Vue.set() et Vue.delete().

var app = new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  }
});

// 只能使用Vue提供的特殊方法进行数组的操作
 Vue.set(app.arr, 3, 4);

Une telle opération est évidemment peu pratique Nous pouvons utiliser une bibliothèque pour résoudre ce problème. Le nom de cette bibliothèque est vuex.

Vuex est une bibliothèque de gestion d'état spécialement développée pour Vue. Elle peut nous aider à gérer de manière centralisée le modèle de données et à partager le même état entre plusieurs composants, facilitant ainsi notre gestion d'état dans Vue.

Grâce à Vuex, nous pouvons diviser plusieurs composants avec des données partagées dans un gestionnaire d'état structuré en arborescence. Lorsqu'un composant souhaite modifier un certain attribut, il doit soumettre une action pour déclencher indirectement une mutation. La mutation peut changer d'état. Lorsque l'état change, tous les composants qui dépendent de cet état sont automatiquement mis à jour.

3. Problèmes de performances de longue liste

Dans Vue, si nous avons une longue liste, lorsqu'une des données change, cela provoquera toutes les données dans la liste entière à restituer, ce qui peut entraîner des problèmes de performances. Afin de résoudre ce problème, Vue fournit un attribut clé. Nous pouvons donner à chaque objet de la liste une valeur clé, de sorte que lorsque les données changent, seul l'élément modifié sera restitué, pas la liste entière.

<template>
  <div>
    <li v-for="(item, index) in list" :key="item.id">{{item.name}}</li>
  </div>
</template>

Summary

Vue utilise le détournement de données pour implémenter la liaison de données bidirectionnelle, mais cette méthode entraînera certains problèmes, tels que l'incapacité de surveiller les nouvelles propriétés de l'objet , et l'incapacité de gérer les modifications apportées aux tableaux, etc. Mais il existe de nombreuses façons de résoudre ces problèmes dans Vue, comme utiliser des attributs clés pour améliorer les performances de rendu des listes, utiliser Vuex pour la gestion des états, etc. Nous devons choisir la méthode la plus appropriée pour résoudre les problèmes que le détournement de données Vue peut causer.

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!