Vue2で配列の変更を検出できない理由と解決策

JavaScript の制限により、Vue は次の配列の変更を検出できません。

• インデックスを使用して配列項目を直接設定する場合、例: vm.items[indexOfItem] = newValue
• 配列の長さを変更する場合、例えば：vm.items.length = newLength

var vm = 新しい Vue({
  データ： {
    項目: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 応答なし vm.items.length = 2 // 応答なし

回避策

手動で監視を追加する // Vue.set
Vue.set(vm.items、アイテムのインデックス、新しい値)
vm.$set(vm.items, アイテムのインデックス, 新しい値)
Vue は配列変更メソッドの応答性を実装しているため、配列変更メソッドを使用します // Array.prototype.splice
vm.items.splice(アイテムのインデックス、1、新しい値)

Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?

公式ドキュメントでは、これら 2 つの点について、「JavaScript の制限により」実装不可能であると簡単にまとめており、Object.defineProperty はデータの変更を検出するためのソリューションです。この制限は Object.defineProperty のことを指しているのでしょうか?

実際、その理由は Object.defineProperty() の脆弱性ではなく、パフォーマンス上の考慮によるものです。配列内の Object.defineProperty のパフォーマンスはオブジェクト内と同じです。配列のインデックスはオブジェクト内のキーとみなすことができます。

• 対応する要素の値をインデックスでアクセスまたは設定する場合、ゲッターメソッドとセッターメソッドをトリガーできます。
• プッシュまたはシフト解除するとインデックスが増加します。新しく追加された属性は、確認する前に手動で初期化する必要があります。
• pop または shift によって要素を削除すると、インデックスが削除および更新され、setter メソッドと getter メソッドもトリガーされます。
  

したがって、Object.defineProperty には配列インデックスの変更を監視する機能がありますが、vue2.x ではこの機能は廃止されています。

ソースコード分析

Object.property はインデックスを通じて配列を変更する操作を検出できますが、Vue はこれを実装していません。それではソースコードを見てみましょう。

ヴュー3.0

Vue 3.0 では、既存の問題を解決するために Object.defineProperty() の代わりに proxy が使用されます。

以上が、Vue2で配列の変更が検出できない原因と解決方法の詳しい内容です。Vue2の配列の変更についてさらに詳しく知りたい方は、123WORDPRESS.COMのその他の関連記事もぜひご覧ください！