vueのデータは更新されますが、ビューは更新されません

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

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

インデックスで配列アイテムを直接設定する場合、例：vm.items [indexOfItem] = newValue
を使用できます。

Vue.set（vm.items、indexOfItem、newValue）;または：vm。$ set（vm.items、indexOfItem、newValue）
vm.items.splice（indexOfItem、1、newValue）
配列の長さを変更する場合、例：vm .items.length = newLength
を使用できます：vm.items.splice（newLength）

JavaScriptの制限により、Vueはオブジェクトプロパティの追加または削除を検出できません。

Vueはインスタンスの初期化時にプロパティに対してゲッター/セッター変換を実行するため、Vueがデータオブジェクトをリアクティブに変換するには、プロパティがデータオブジェクトに存在する必要があります。

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

すでに作成されているインスタンスの場合、Vueではルートレベルのリアクティブプロパティを動的に追加することはできません。ただし、Vue.set（object、propertyName、value）メソッドを使用して、ネストされたオブジェクトに応答プロパティを追加できます。

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

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

または：グローバルVue.setの単なるエイリアスであるvm。$ setインスタンスメソッドを使用できます。

vm。$ set（vm.userProfile、 'age'、27）
既存のオブジェクトに複数の新しいプロパティを割り当てる場合：

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

記述されたコードがdom更新よりも高速に実行されることが原因である可能性もあります。this。$ nextTick（）を使用して、次のdom更新までコード実行を遅らせることができます。

グローバルメソッドVue.nextTick（）と同様に、違いは、このコールバックがそれを呼び出すインスタンスに自動的にバインドされることです。

this.value = '你好啊';
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});

配列内のオブジェクトの値を変更します。

//data中list的值
list: [
{
name:'Lee',
age:20
}
]

//响应式修改值
this.list[0].name = "Joh";
this.$set(this.list,0,this.list[0]);