Detaillierte Erläuterung der Vue-Array-Aktualisierungsmethode-js-Tutorial-php.cn

Detaillierte Erläuterung der Vue-Array-Aktualisierungsmethode

小云云

Freigeben： 2017-12-18 09:00:15

Original

2671 Leute haben es durchsucht

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

1. Klassifizierung der Datenmethode:

(1) Ursprüngliche Array-Änderung

Push
Pop
Unshift
Shift
Reverse
sort
splice

(2) Das ursprüngliche Array bleibt unverändert, generieren Sie ein neues Array

slice
concat
filter

für Methoden zum Ändern des Original-Array, die Ansicht kann direkt aktualisiert werden.

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: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级',
              author: 'b'
            },
            {
              name: 'java',
              author: 'c'
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: 'c++',author: 'd'});
      //需要更新原数组
      app.books = app.books.concat([{name: 'c++',author: 'd'}]);
    </script>
  </body>
</html>

Nach dem Login kopieren

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, wie zum Beispiel:

 <!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: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级111',
              author: 'b'
            },
            {
              name: 'java33333',
              author: 'c'
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return this.books.sort(function(a,b){
              return a.name.length>b.name.length?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

Nach dem Login kopieren

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 später aufzeichnet, wenn der Setter der Abhängigkeit aufgerufen wird , wird der Beobachter 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, damit sie reagiert. Beispiel:

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

Nach dem Login kopieren

Vue erlaubt kein dynamisches Hinzufügen neuer reaktiver Eigenschaften auf Stammebene zu bereits erstellten Instanzen. Es ist jedoch möglich, Antworteigenschaften zu verschachtelten Objekten hinzuzufügen, indem man die Methode Vue.set(object, key, value) verwendet:

Vue.set(vm.someObject, 'b', 2)

Nach dem Login kopieren

Sie können auch die Instanzmethode vm.$set verwenden, die ebenfalls global ist Vue. Alias für Set-Methode,

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Array-Aktualisierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!