vue配列におけるオブジェクト属性の変化ページをレンダリングしない問題を解決します。

チェックボックスの多選択機能をする時にピットに遭遇しました。論理はどう見ても正しいですが、バグがあります。最後に、行列の値が変わったことに気づきました。ページチェックは再レンダリングされていません。
キーワードを変えて検索して関連方法を見つけました。
実は前に文書教程を読んだ時にここを見たことがありますが、本当に使ってからこそ一番直接的な感じがします。
配列更新検出
変異の方法
Vueは配列の変異を観察するセットを含んでいますので、それらもビューの更新をトリガします。これらの方法は以下の通りです。
push()
ポップ()
shift()
unshift()
splice()
sort()
逆転（）
コンソールを開けて、前の例のitems配列で変異方法を呼び出します。example 1.items.push({message:'Baz')
置換行列
変異法（mutation method）は、名前の通り、これらの方法で呼び出された元の配列を変えます。対照的に、非変異（non-mutting method）方法もあります。例えば、filter（）、concat（）、slice（）。これらは元の配列を変えませんが、常に新しい配列を返します。非変異法を使用すると、古い配列を新しい配列で置き換えることができます。

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

これは既存のDOMを捨て、リスト全体を再レンダリングすることにつながると考えられます。幸いなことに、事実はそうではない。VueはDOM要素を最大範囲で再使用するために、いくつかのスマートな、発見的な方法を実現しているので、同じ要素を含む配列で元の配列を置き換えるのは非常に効率的な操作です。
注意事項
JavaScriptの制限のため、Vueは以下の変動の配列を検出できません。
インデックスを利用して直接項目を設定すると、例えば、vm.items[indexOfItem]=newValue
配列の長さを変更すると、例えば、vm.items.length=newLength
第1の問題を解決するために、以下の2つの方法でvm.items=indexOfItem=newValueと同じ効果を実現できます。同時に、トリガ状態の更新も可能です。

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

第二の問題を解決するために、spliceを使うことができます。

example1.items.splice(newLength)

オブジェクト変更検出注意事項
それともJavaScriptの制限のため、Vueは対象属性の追加または削除を検出できません。

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a`        
 
vm.b = 2
// `vm.b`       

作成されたインスタンスに対して、Vueはルートレベルの応答属性を動的に追加することができません。ただし、Vue.set(object，key，value)メソッドを使用して、ネストオブジェクトに応答式の属性を追加することができます。例えば、対：

var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

ネストされたuserProfileオブジェクトに新しいage属性を追加できます。

Vue.set(vm.userProfile, 'age', 27)

vm.$setの実例的な方法も使用できます。グローバルVue.setの別名です。

this.$set(this.userProfile, 'age', 27)

Object.assign（）または_.を使うなど、既存のオブジェクトに新しい属性を与える必要がある場合があります。exted()この場合、2つのオブジェクトの属性で新しいオブジェクトを作成します。したがって、新しい応答属性を追加したいなら、このようにしないでください。

Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

このようにすべきです。

this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

以上のこの問題を解決しました。vue配列におけるオブジェクト属性の変化ページにレンダリングしない問題は、小編集が皆さんに提供しているすべての内容です。