Die Vue-Array-Zuweisung kann nicht aufgezählt werden

In Vue werden häufig Arrays zur Datenbindung verwendet. Manchmal stoßen wir jedoch auf ein seltsames Problem: Wenn wir den Wert des Arrays mithilfe einer Zuweisungsanweisung direkt ändern, wird die Komponente nicht erneut gerendert.

Das liegt daran, dass das reaktionsfähige System von Vue auf Basis von JavaScript-Settern implementiert ist. Wenn Sie versuchen, die Daten in der Vue-Instanz direkt zu ändern, erfasst Vue diesen Vorgang nicht und kann die Ansicht nicht aktualisieren, um diese Änderungen widerzuspiegeln. Mit anderen Worten: Vue kann keine Unterstützung für nicht reagierende Daten garantieren.

Schauen wir uns ein Beispiel an:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = ["Grape", "Orange", "Pineapple"];
    }
  }
};
</script>

In dieser Komponente haben wir ein einfaches Array items, das zur Anzeige einer ungeordneten Liste verwendet wird. Es gibt auch eine Schaltfläche, und wenn wir darauf klicken, weisen wir das Array items direkt einem neuen Array zu. items，它被用来显示一个无序列表。还有一个按钮，当我们点击它时，我们直接将items数组赋值为一个新数组。

当我们运行这个组件时，我们会发现点击按钮并没有更新列表。这是因为我们使用了赋值语句直接改变了items数组。在这种情况下，Vue无法检测到数组的变化。

那么应该怎么做呢？

Vue提供了一些方法来解决这个问题。让我们来看看其中的一些。

1. Vue.set

Vue.set是Vue的一个全局方法，用来向响应式对象中添加响应式属性。在处理数组时，Vue.set还可以用来实现在指定位置插入一个新元素。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      Vue.set(this.items, 1, "Orange");
    }
  }
};
</script>

在这个例子中，我们将updateItems方法中的数组赋值语句替换为Vue.set方法。第一个参数是要修改的数组，第二个参数是要修改的索引，第三个参数是要插入的新元素。

现在我们可以放心地修改数组了，视图也会跟着更新。

2. splice

JavaScript的splice方法可以在指定位置添加或删除元素。在Vue中，我们可以使用它来更新数组并触发视图重新渲染。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items.splice(1, 1, "Orange");
    }
  }
};
</script>

在这个例子中，我们用splice方法将Banana替换为Orange，并在原地更新了items数组。这样就会触发重新渲染。

当然，这并不是说我们应该在任何时候都使用splice方法，而是要根据自己的具体情况进行选择。

3. filter

当需要移除数组中的某些元素时，我们可以利用filter方法。它会返回一个新数组，该数组只包含满足条件的元素。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = this.items.filter(item => item !== "Banana");
    }
  }
};
</script>

在这个例子中，我们使用filter方法创建了一个新的数组，只保留了不等于Banana的元素。然后我们将原来的数组赋值为这个新数组，这样就触发了视图的更新。

总结

在Vue中，数组的直接赋值并不会触发视图的重新渲染，这是由于Vue的响应式系统的实现机制所致。为了解决这个问题，Vue提供了很多可以应对不同情况的方法，例如Vue.set、splice和filter

Wenn wir diese Komponente ausführen, werden wir feststellen, dass durch Klicken auf die Schaltfläche die Liste nicht aktualisiert wird. Dies liegt daran, dass wir eine Zuweisungsanweisung verwendet haben, um das Array items direkt zu ändern. In diesem Fall kann Vue keine Änderungen am Array erkennen. 🎜🎜Was sollen wir also tun? 🎜🎜Vue bietet einige Möglichkeiten, dieses Problem zu lösen. Werfen wir einen Blick auf einige davon. 🎜

1. Vue.set

🎜Vue.set ist eine globale Methode von Vue, die zum Hinzufügen reaktionsfähiger Eigenschaften zu reaktionsfähigen Objekten verwendet wird. Beim Umgang mit Arrays kann Vue.set auch verwendet werden, um ein neues Element an einer angegebenen Position einzufügen. 🎜rrreee🎜In diesem Beispiel ersetzen wir die Array-Zuweisungsanweisung in der Methode updateItems durch die Methode Vue.set. Der erste Parameter ist das zu ändernde Array, der zweite Parameter ist der zu ändernde Index und der dritte Parameter ist das neue einzufügende Element. 🎜🎜Jetzt können wir das Array sicher ändern und die Ansicht wird entsprechend aktualisiert. 🎜

2. splice

🎜Die splice-Methode von JavaScript kann Elemente an der angegebenen Position hinzufügen oder entfernen. In Vue können wir damit Arrays aktualisieren und ein erneutes Rendern der Ansicht auslösen. 🎜rrreee🎜In diesem Beispiel verwenden wir die Methode splice, um Banana durch Orange zu ersetzen und die itemsan Ort und Stelle zu aktualisieren Code>Array. Dadurch wird ein erneutes Rendern ausgelöst. 🎜🎜Das bedeutet natürlich nicht, dass wir immer die splice-Methode verwenden sollten, aber wir müssen eine Entscheidung treffen, die auf unseren spezifischen Umständen basiert. 🎜

3. Filter

🎜Wenn wir bestimmte Elemente im Array entfernen müssen, können wir die Methode filter verwenden. Es wird ein neues Array zurückgegeben, das nur Elemente enthält, die die Bedingung erfüllen. 🎜rrreee🎜In diesem Beispiel verwenden wir die Methode filter, um ein neues Array zu erstellen und behalten nur Elemente bei, die nicht gleich Banana sind. Dann weisen wir das ursprüngliche Array diesem neuen Array zu und lösen so eine Aktualisierung der Ansicht aus. 🎜

Zusammenfassung

🎜In Vue löst die direkte Zuweisung eines Arrays nicht das erneute Rendern der Ansicht aus. Dies liegt am Implementierungsmechanismus des responsiven Systems von Vue. Um dieses Problem zu lösen, bietet Vue viele Methoden zur Bewältigung verschiedener Situationen, wie z. B. Vue.set, splice und filter usw. Die Wahl der geeigneten Methode kann es uns erleichtern, die für den Betrieb erforderlichen Funktionen auszuführen, und unseren Code außerdem lesbarer und wartbarer machen. 🎜

Das obige ist der detaillierte Inhalt vonDie Vue-Array-Zuweisung kann nicht aufgezählt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!