vue数组中对象属性变化页面不渲染问题

问题引入

Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听。

因此，如果我们直接对数组元素赋值

<ul>
   <li v-for="(item,index) in arrInfo">{{item.name}}--{{item.age}}</li>
</ul>

data(){
    return {
      arrInfo:[
        {'name':'zuobaiquan','age':22},
        {'name':'zhangsan','age':20}
      ]
    }
},
// created(){
//   this.arrInfo[0]={'name':'zuobaiquan01','age':22}
// },
mounted(){
  this.arrInfo[0]={'name':'zuobaiquan02','age':22}
}

在mounted阶段，直接对数组元素 arrInfo 赋值会导致Vue无法更新View

说明：在 created 视图未渲染时直接对数组元素 arrInfo 赋值 data里面的初值会改变的。

此时在mounted阶段，简单的做法是不要对数组元素赋值，而是更新

mounted(){
    this.arrInfo[0]={'name':'zuobaiquan02','age':22}
    //正确做法
    //this.arrInfo[0].name='zuobaiquan02'
    //this.arrInfo[0].age=23
}

另一种做法：通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：

//正确做法二 通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：
var newArrItem={'name':'zuobaiquan02','age':24}
this.arrInfo.splice(0, 1, newArrItem);

源码地址：https://github.com/zuobaiquan/vue/blob/master/vueExercise/vue-test/src/views/vue-set/index01.vue

针对此问题 vue还提供了另外一种方法 set https://cn.vuejs.org/v2/api/#vm-set

调用方法：Vue.set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

此时应该这样处理

//正确做法三 利用vue内置属性 set
var newArrItem={'name':'zuobaiquan02','age':24}
this.$set(this.arrInfo,0,newArrItem)

数组更新检测

变异方法

Vue 包含一组监听数组的变异方法，所以它们也将会触发视图更新。这些方法有 push、pop、shift、unshift、splice、sort、reverse

替换数组

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

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

你可能认为这将导致 vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

整理：变异方法：push、pop、shift、unshift、splice、sort、reverse

非变异方法：filter、 concat、 slice

总结

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

第一类问题：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

第二类问题：当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 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'
     }
   }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

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

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

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

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

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

你应该这样做：

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

参考原文：https://www.cnblogs.com/thinkingthigh/p/7789108.html