Vue dataオプションの配列の更新

title:Vue更新dataオプションの配列date:2018-12-18 18:05:19 tags:[Vue]categories:Vue
疑問
最近、面接問題を見ました.

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

このように書くと何か問題がありますか.どう書けばいいですか.
私はこの問題を見たとき、何か問題があるとは思わなかった.Vueでは、応答式データが変更されると、setterはwatcherに通知するのではないでしょうか.
に答える
後で知ったのですが、このように書くとVueはその配列データに対応するビューを更新しません.
まず、公式ドキュメントの深い応答式の原理を読んでから、次のようにしてください.

データは確かに更新されたが、ビューは更新されていないので、Vueが

データの更新を検出していないことを示している.

は実は配列の問題で、Vueでは比較的特殊です.

Vueはインスタンスの初期化時に属性に対してgetter/setter変換プロセスを実行するため、属性がdataオブジェクト上に存在しなければVueを変換できないことを知っています.そうすれば、データが応答的になることができます.

は深く言えば、Vueは私たちのdataオブジェクト上でob属性を定義して新しく作成したObserverオブジェクトを指し、データに対してモニタを設定します.しかし、現代のJavaScriptの制約(下位原理不明)により、Object.Observeでサポートされていないため、Vueは配列をObserverオブジェクト作成できないため、配列オブジェクトの変化を検出できない.

しかし、Vueは私たちに別の方法を提供してくれました.具体的には以下を参照してください.

解決策

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)

部分参考ブログ