vue2-数组更新，视图不刷新

• 问题原因：由于JavaScript的限制，Vue不能检测数组和对象的变化；性能代价和获得用户体验不成正比。  通俗理解：vue不能检测通过数组索引值，直接修改一个数组项
• 场景

表格

点击详情后的弹窗

export default {
  data() {
    return{
         // 一条费用的详情信息
        costInfo: [{}],
    },
methods:{
         // 查看详情
        handleDetail(row) {
          this.detailVisible = true;
          //下面的代码中，我在疯狂地通过下标改数组costInfo的值-----
          this.costInfo[0] = { ...row };
          this.costInfo[0].paymentStatusText =this.costInfo[0].paymentStatus == 1 ? "已缴费" : "未缴费";
          this.costInfo[0].AllAmount =this.costInfo[0].pricing * this.costInfo[0].costNum;
          console.log(this.costInfo);//这里打印costInfo
    },
    }
}

这里我就发现，当我点击不同的费用时，打印出来的costInfo是不同的，但是弹窗中的内容竟然是相同的。造成的原因就是数据更新了，视图没有更新。

• 解决方法

使用this.$set()——this.$set 是Vue中的一个实例方法，用于在响应式对象上设置新的属性或修改已有的属性，并确保这些属性也是响应式的。

使用this.$set 可以解决Vue响应式系统的一个限制，即无法检测到通过索引直接设置数组元素或通过Object.defineProperty添加的属性的变化，所以通过this.$set 方法，可以显式地告诉Vue，某个属性的值已经发生了变化，从而触发视图的更新。

 // 查看详情
        handleDetail(row) {
          this.detailVisible = true;
          //下面的代码中，我在疯狂地通过下标改数组costInfo的值-----
          this.costInfo[0] = { ...row };
          this.costInfo[0].paymentStatusText =this.costInfo[0].paymentStatus == 1 ? "已缴费" : "未缴费";
          this.costInfo[0].AllAmount =this.costInfo[0].pricing * this.costInfo[0].costNum;
          console.log(this.costInfo);//这里打印costInfo
            //强制视图刷新**
          this.$set(this.costInfo, 0, this.costInfo[0]);
    }

**补充**

• 普通数组

定义普通数组：       
twoArr: [11, 22, 33, ]                        
 
基本语法：
this.$set(twoArr，0，55)

console.log(twoArr)//[55,22,33]
 

• 对象数组

定义数组包对象：
arr: [                                           
  { name: "小王", age: 18 },
  { name: "小张", age: 20 },
 ],
                      
 
基本语法：
this.$set(arr，1，{ name: "小李", age: 50 })

console.log( [                                           
  { name: "小王", age: 18 },
  { name: "小李", age: 50},
 ])
 

• 数组新增

1. 首先需要获取新增的数组长度

定义数组包对象：
arr: [                                           
  { name: "小王", age: 18 },
  { name: "小张", age: 20 },
 ],


let reslg = this.arr.length;  

      2. 然后添加在数组末尾

this.$set(this.arr,reslg,{name:小美,age:18})


//控制台输出
arr: [ 
        { name: "小王", age: 18 },
        { name: "小张", age: 20 },
        { name: "小美", age: 18 },
     ]