vue 中数据层级太多，到时数据改变时没有及时将其渲染到页面上

简单来说是用vue的原方法：$set

this.$set('你的复杂数组','所需改变的数组的index','复杂数组所对应所需改变的index改变后的值')

如下所示代码，我的复杂数组为commanlist,this.commandlist[index].originjs又作为一个数组，放在页面中进行新的渲染，并且其增删改需要联动页面展示。
js代码处的方法中，按照常规的this.commanlist[index].originjs.push(newitem)之后，虽然commandlist有发生改变，但是页面渲染并没有发生变化。
用$set赋值之后，就可以顺利联动了。

如果input框没法输入值，则在对应的input框上添加监听事件事件，强制更新，详见代码

如果小伙伴们有更简单的方法，评论回复我哈，谢谢~

template:

<div class="command-link-uri" v-if="item.kind=='link'">
                  JS源: <i class="add el-icon-circle-plus-outline" title="添加js源" @click="addSingleUri(index)"></i>
                  <div class="per-origin-js clearfix" v-for="(itemjs,indexoriginjs) in item.originjs" :key="'index'+indexoriginjs">
                    <div class="uridelete"><i class="delete el-icon-remove-outline" title="删除该js源"></i></div>
                    <div class="urilink">
                      <el-input v-model="item.originjs[indexoriginjs]" @input="change($event)" placeholder="请输入js地址"></el-input>
                    </div>
                  </div>
                </div>

js:

addSingleUri(index){
      if(!(this.commandlist[index].originjs && this.commandlist[index].originjs.length)){
        this.commandlist[index].originjs=[]
      }
      this.commandlist[index].originjs.push("")
      var attritem=this.commandlist[index]
      // 对象层级太多导致数据改变后页面无法渲染
      this.$set(this.commandlist, index, attritem);
    },
change(e) {
      this.$forceUpdate();
    },

2020/07/24更新
今天看到vue官网针对set的说明，感觉能比较好的解释为什么层次太深无法渲染的问题