Vue中数组赋值问题

出现的问题

昨天工作内遇到的问题，用输入arrList渲染了一个表格，修改了arrList，然而列表没有改变。 Vue 不是双向绑定吗？怎么回事？what's fuck 值变了? 列表没有变？？？

测试代码

    //Vue中列表渲染的数据是这样的,单价和数量
    renderData:[
            {perPrice: 1, number: 10},
            {perPrice: 1, number: 20},
            {perPrice: 1, number: 30},
          ]

  html 就不写了，反正就是列表渲染

效果如下

我给还原按钮写了个事件，点击修改renderData

//还原按钮的点击事件
resetData(){
      this.renderData[0] = {perPrice: 1, number: 10}
      this.renderData.length = 1
    }

点击还原，列表毫无反应，我明明改变了数组的值，还有他的长度。

解决

最后阅读了Vue的[官方文档](cn.vuejs.org/v2/guide/li…" 百度一下")，找到了答案 由于 JavaScript 的限制，Vue 不能检测刚刚的数组修改操作

代码修改

//还原按钮的点击事件
resetData(){
          this.$set(this.renderData,0,{perPrice: 1, number: 10})
          this.renderData.splice(1)
          console.log(this.renderData);
        }

效果如下