recherche

Maison >interface Web >js tutoriel >Explication détaillée de la mise à jour du tableau VUE

Explication détaillée de la mise à jour du tableau VUE

小云云
小云云original
2017-12-19 09:03:212577parcourir

Concernant la mise à jour du tableau vue, cet article présente principalement le problème de la mise à jour du tableau VUE. L'article présente comment vue surveille les changements de données. J'espère que cela pourra aider tout le monde.

1. Classification des méthodes de données :

(1) Changement de tableau d'origine

push
pop
unshift
shift
reverse
sort
splice

(2) Le tableau d'origine reste inchangé et un nouveau tableau est généré

slice
concat
filter

Pour les méthodes qui modifient le tableau d'origine, vous pouvez directement mettre à jour la vue.

Pour les méthodes où le tableau d'origine reste inchangé, vous pouvez remplacer le tableau d'origine par un nouveau tableau pour modifier la vue.

Exemple de code : 


<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in books">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java&#39;,
              author: &#39;c&#39;
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: &#39;c++&#39;,author: &#39;d&#39;});
      //需要更新原数组
      app.books = app.books.concat([{name: &#39;c++&#39;,author: &#39;d&#39;}]);
    </script>
  </body>
</html>

Remarque : ce qui suit ne déclenchera pas de mise à jour de la vue.

(1) Définir les éléments directement par index.

(2) Modifiez la longueur du tableau, app.books.length=1.

Si vous ne souhaitez pas modifier le tableau d'origine, vous pouvez utiliser des propriétés calculées pour filtrer le tableau, telles que : 


 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in filterBooks">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级111&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java33333&#39;,
              author: &#39;c&#39;
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return this.books.sort(function(a,b){
              return a.name.length>b.name.length?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

Alors, comment vue écoute-t-il ? Qu'en est-il des changements dans les données ?

1) Comment suivre les modifications

Chaque instance de composant a un objet d'instance d'observateur correspondant, qui enregistrera les propriétés en tant que dépendances pendant le processus de rendu du composant lorsqu'une dépendance est créée. setter est appelé, l'observateur est invité à recalculer, ce qui entraîne la mise à jour de ses composants associés.

2) Problèmes de détection des modifications

En raison des limitations du JavaScript moderne (et de la dépréciation d'Object.observe), Vue ne peut pas détecter l'ajout ou la suppression de propriétés d'objet. Étant donné que Vue effectue le processus de conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet de données pour que Vue la convertisse afin qu'elle soit réactive. Par exemple : 


var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue n'autorise pas l'ajout dynamique de nouvelles propriétés réactives au niveau racine sur des instances déjà créées. Cependant, il peut utiliser la méthode Vue.set(object, key, value) pour ajouter des propriétés de réponse aux objets imbriqués : 


Vue.set(vm.someObject, &#39;b&#39;, 2)

Vous pouvez également utiliser vm.$ set méthode d'instance, qui est également un alias de la méthode globale Vue.set,

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des composants contrôlés par React et des composants non contrôlésArticle suivant：Explication détaillée des composants contrôlés par React et des composants non contrôlés

Articles Liés

Voir plus