直接对数组中的元素赋值不会触发Vue的响应式更新

Vue.set()例 -->直接对数组中的元素赋值不会触发Vue的响应式更新

 data () {
     return {
         dataSource: [{
             id: 1, name: Bill, age: 21
         },{
             id: 2, name: stive, age: 23
         },{
             id: 3, name: alan, age: 26
         }]
     }
 }

我们修改了其中的某一项，并通过下面的方式更新到数组中：
let modifiedRow = {id: 2, name: cook, age: 20}
this.dataSource[1] = modifiedRow
// 视图未发生更新
我们会发现，表格中现实的数据并没有改变，这是因为直接对数组中的元素赋值不会触发Vue的响应式更新，为了解决 Js 语言特性的限制，Vue提供了一种变通的方法，通过 push() 、 pop() 、 shift() 等函数来修改数组即可。
dataSource.splice(1, 1, modifiedRow)
// 视图响应式更新
除此之外我们也可以通过 Vue.set() 函数修改数组，比如：
Vue.set(dataSource, 1, modifiedRow)
-------------------原文地址