vue2.0数据更新，重新渲染视图的三种方法

问题：利用v-for渲染数据，通过方法改变了数据，视图没有更新。

原因：由于javascript的限制，Vue不能检测到以下变动的数组（如：objArr）：

1.通过索引直接设置数组的某个值，this.objArr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性，this.objArr[index].pro = newValue;

3.通过修改数组的长度，this.objArr.length = newLength;

解决重点：实现类似this.objArr[index] = newValue的效果，同时能更新视图

解决办法：

1.索引直接设置数组的某个值

  
  

    
    

     
     

    
    
    
    

     
     

      
      //1.Vue.set
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      Vue.set(
      
      this.objArr,index,newValue)  
      
      //(数组，索引，值)
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      //2.prototype.splice
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr.splice(index,
      
      1,newValue) 
      
      //(索引，长度，值)
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      //3.Object.assign
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr[index] = newValue
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr = 
      
      Object.assign({},
      
      this.objArr) 
      
      //存在弊端，该objArr的类型会从数组变成对象
     
     
    
    
  
  

2.索引直接设置数组中对象的某个属性

  
  

    
    

     
     

    
    
    
    

     
     

      
      //1.Vue.set
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr[index].pro = newValue
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      var tempObj = 
      
      this.objArr[index]
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      Vue.set(
      
      this.objArr,index,tempObj)  
      
      //(数组，索引，值)
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      //2.prototype.splice
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr[index].pro = newValue
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      var tempObj = 
      
      this.objArr[index]
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr.splice(index,
      
      1,tempObj) 
      
      //(索引，长度，值)
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      //3.Object.assign
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr[index].pro = newValue
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr = 
      
      Object.assign({},
      
      this.objArr) 
      
      //存在弊端，该objArr的类型会从数组变成对象
     
     
    
    
  
  

3.修改数组的长度

  
  

    
    

     
     

    
    
    
    

     
     

      
      //1.prototype.splice
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr.splice(
      
      this.objArr.length,
      
      0,
      
      new 
      
      Object()) 
      
      //(索引，长度，值) 从长度索引开始增加一个新的对象。
     
     
    
    

    
    

     
     

    
    
    
    

     
     
 
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      //2.Object.assign
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr.length = newLength
     
     
    
    

    
    

     
     

    
    
    
    

     
     

      
      this.objArr = 
      
      Object.assign({},
      
      this.objArr) 
      
      //存在弊端，该objArr的类型会从数组变成对象
     
     
    
    
  
  

解决实例：

下载地址

推荐阅读：

事件捕获、事件冒泡详解

JS将数字转成货币形式的简单方法

原文:https://blog.csdn.net/a646070718/article/details/80147075