suchen

Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie die Array-Aktualisierungsfunktion in VUE

So implementieren Sie die Array-Aktualisierungsfunktion in VUE

亚连
亚连Original
2018-06-20 15:07:351952Durchsuche

In diesem Artikel wird hauptsächlich das Problem der VUE-Array-Aktualisierung vorgestellt. Freunde, die es benötigen, können darauf verweisen

1.

(1) Ursprüngliche Array-Änderung

Push
Pop
Unshift
Shift
Reverse
Sortieren
Splice

(2) Das ursprüngliche Array bleibt unverändert und es wird ein neues Array generiert

slice
concat
filter

Für die Methode zum Ändern des ursprünglichen Arrays, Sie kann die Ansicht direkt aktualisieren.

Bei Methoden, bei denen das ursprüngliche Array unverändert bleibt, können Sie das ursprüngliche Array durch ein neues Array ersetzen, um die Ansicht zu ändern.

Beispielcode: 

<!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>

Hinweis: Folgendes löst keine Aktualisierung der Ansicht aus.

(1) Elemente direkt nach Index festlegen.

(2) Ändern Sie die Array-Länge, app.books.length=1.

Wenn Sie das ursprüngliche Array nicht ändern möchten, können Sie berechnete Eigenschaften verwenden, um das Array zu filtern, z. B.: 

 <!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>

Wie überwacht Vue Daten? Änderungen?

1) So verfolgen Sie Änderungen

Jede Komponenteninstanz verfügt über ein entsprechendes Watcher-Instanzobjekt, das die Eigenschaften während des Komponentenrenderingprozesses als Abhängigkeiten aufzeichnet Wenn der Setter aufgerufen wird, wird der Watcher zur Neuberechnung aufgefordert, wodurch die zugehörigen Komponenten aktualisiert werden.

2) Probleme bei der Änderungserkennung

Aufgrund der Einschränkungen von modernem JavaScript (und der Ablehnung von Object.observe) kann Vue das Hinzufügen oder Löschen von Objekteigenschaften nicht erkennen. Da Vue bei der Initialisierung der Instanz den Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie konvertieren kann, sodass sie reagiert. Beispiel: 

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

Vue erlaubt nicht das dynamische Hinzufügen neuer reaktiver Eigenschaften auf Stammebene zu bereits erstellten Instanzen. Es kann jedoch die Methode Vue.set(object, key, value) verwenden, um Antworteigenschaften zu verschachtelten Objekten hinzuzufügen: 

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

Es kann auch die Instanzmethode vm.$set verwendet werden, die auch das globale Vue ist. Methodenalias festlegen,

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Array-Aktualisierungsfunktion in VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie vue-cli zum Implementieren mehrseitiger AnwendungenNächster Artikel：So verwenden Sie vue-cli zum Implementieren mehrseitiger Anwendungen

In Verbindung stehende Artikel

Mehr sehen