VUE数据data更新而列表不更新，关于VUE的响应式原理的几个

关于数组

1. 使用数组变异方法

   对Vue实例中data里面的数组使用变异方法操作的时候，Vue可以检测到变化并进行更新变异方法包括

   • push()
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()

2. 非变异方法

   非变异方法因为不会直接改变原始数组，所以需要使用另外的方法，比如用新数组去替换原数组。用含有相同元素的数组去替换原来的数组是非常高效的操作

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:[
         {message:'Foo'},
         {message:'Baz'}
       ]
     }
   })
   example1.items = example1.items.filter(function (item) {
     return item.message.match(/Foo/)
   })
   

两个错误的例子和对应的正确的方法

1. 使用example1.items[0] = newValue这样的方法来改变数组，改变的值不具有响应特性，正确的方法是

   Vue.set(example1.items, 0, newValue)
   

   或者

   example1.items.splice(0, 1, newValue)
   

2. 使用example1.items.length = newLength的方法改变数组的长度，Vue也无法检测到变化，正确的方法是

   example1.items.splice(newLength)
   

关于对象

Vue不能动态添加根级响应式属性，也不能检测根级属性中属性的添加或删除，这部分内容，看VUE数据data更新而列表不更新，VUE的响应式原理的几个小例子

1. 既然不能添加根级属性，那我们就把需要动态添加的属性嵌套在已有的根级属性里面，通用使用set方法

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     }
   })
   Vue.set(example1.items, 'age', 27)
   

   效果相同的另一种写法，在Vue实例内使用

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         this.$set(this.items, 'age', 27)
       }
     }
   })
   

2. 如果需要添加的属性很多，那就可以使用对象替换的方法，这种方法在上面的数组的方法中也用过

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         this.items = Object.assign({}, this.items, {
            age: 27,
            favoriteColor: 'Vue Green'
      })
       }
     }
   })
   

   这里要注意的地方是：一定要是对此对象的整体替换，直接操作添加的属性不具备响应特性

   直接操作的例子

   var example1 = new Vue({
     el: 'example1'
     data:{
       items:{
         name: 'john' 
       }
     },
     methods: {
       setAttribute: function () {
         Object.assign(this.userProfile, {
            age: 27,
            favoriteColor: 'Vue Green'
      })
       }
     }
   })
   

   ​