Vue オブザーバーは data() の変更に対して起動します

Question

rree

私は少し気が狂っています。オブザーバーは「driver」プロップのみを観察すべきではないでしょうか? 「standsData」を編集すると、並べ替えができなくなる形でトリガーされます。私は何か見落としてますか？

Answer 1

これは配列の並べ替え方法によって異なりますが、this.standsData = this.drivers を割り当てたため、this.standsData の バリエーションは変更されます。また、同じ配列を参照するため、this.drivers の下のデータも変更されます。ドライバー配列をコピーして、次のようにコンポーネント状態に置くこともできます: リーリー

this.standsData

内の他のデータを深く変更するときにも、オブザーバーで deep: true を指定しているため、同様の問題が発生することに注意してください。行う必要がある場合は、 this.drivers を this.standsData に移動するときに、データを deeply にコピーします。これは、カスタム コードまたは lodash.cloneDeep などのツールを使用して実行できます。 ここでのもう 1 つの問題は、デフォルトでは、コンポーネントの初期化時に Vue オブザーバーが起動されないことです。コンポーネントの初期化中に最初に設定された

drivers

プロパティが変更されたときにトリガーされるようにしたい場合は、ウォッチャーに immediate: true を追加する必要があります (ドキュメント here#) ＃＃）。 リーリー