Vue 2では配列変動の原因と解決が検出できません。

JavaScriptの制限のため、Vueは次の配列の変動を検出できません。

インデックスを用いて直接配列項目を設定する場合、例えば、vm.items[indexOfItem]=newValue

配列の長さを変更する場合、例えば、vm.items.length=newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' //       
vm.items.length = 2 //       

解決方法

      
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
vm.$set(vm.items, indexOfItem, newValue)
         ，  vue              
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

なぜVue 2.0では、2つの配列の変化が傍受できないのですか？
公式文書ではこの2つの点について簡単にまとめて「JavaScriptの制限のため」として実現できないが、Object.definePropertyは測定データの変更を実現する方案であり、この制限はObject.definePropertyを指すのですか？
原因はObject.definePropertyに穴があるからではなく、性能の問題から考えています。Object.definePropertyは配列中の表現と対象中の表現が一致しており、配列のインデックスは対象中のkeyと見なすことができる。

インデックスを介して対応する要素の値にアクセスまたは設定すると、getterおよびsetter方法

をトリガすることができる。

は、pushまたはunshiftによってインデックスを増加させ、新たに増加した属性については、手動で初期化する必要があります。

は、ポップまたはシフトによって要素を削除し、インデックスを削除して更新し、setterおよびgetter方法をトリガする。

したがって、Object.definePropertyは、モニタリング配列の下に表示される変化を監視する能力があります。vue 2.xだけはこの特性を放棄しました。

ソース分析
Object.propertyはインデックスによって配列を変える操作を検出できますが、Vueは実現されていません。ソースを見てみましょう。

Vue 3.0
Vue 3.0ではObject.definePropertyの代わりにproxyが存在する問題を解決しました。
以上がVue 2では配列変動の原因と解決の詳細を検出できません。Vue 2配列変動に関する資料は他の関連記事に注目してください。