VUE 更新数组内容页面不刷新

背景：业务中涉及一个Vue页面，该页面有大量的表单数据，一次请求需要等待20几秒，现在对该页面进行优化，点击某个表单加载相应的数据，以此来降低页面响应时间，将其控制在3S左右。

首先，接口毫秒级一次返回所有数据的集合，那么对返回的数据进行按需加载处理，将处理的数据放到新的数组中去渲染页面即可达到按需加载。由于JavaScript的限制，在使用索引对数组进行赋值时，Vue不会重新渲染页面。

原因：
在Vue里面，其核心双向绑定的实现，是通过Object.defineProperty()（在Vue3中使用了proxy）来劫持对象的，但Object.defineProperty()无法劫持数组成员的变化
列如：
arr[3] = newValue;
数组arr本身没有变化.

解决方案：利用splice ，该方法会改变数组本身。为什么该方法可以修改数组后触发页面响应式更新呢？答：vue重写了这些方法，具体怎么写的大家可以去看源码vue/src/core/observer/array.js
splice的使用如下：

arrayObject.splice(
  // index: 必需，整数，添加/删除项目的位置，使用负数可从数组结尾处规定位置
  index,
  // howmany: 添加/删除元素的个数
  howmany,
  // item1,......,itemx: 待添加元素
  item1,.....,
  itemX
)
列子：
this.formTemplate.splice(val, 1, this.formTemplateAll[val]);