vue中data數據更新，視圖卻沒有更新的原因

由於 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 會在初始化實例時對屬性執行 getter/setter 轉化，所以屬性必須在 data 對象上存在才能讓 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)

或者：可以使用 vm.$set 實例方法，它只是全局 Vue.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 自動綁定到調用它的實例上。

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]);

原文鏈接：https://blog.csdn.net/wsln_123456/article/details/95218723