vue中数组变异方法push动态添加数据时视图不更新

image.png

vue中，数组动态push对象时正常情况是可以更新视图的，犯了一个错误，记录一下总结就是：注意数据是否为响应式数据
最常见场景：form表单中有一组动态增删数据的列表，如图示：

image.png

form: {
  answer: ' ',
  smQuestionList: []
}
// 新增
addQues() {
  this.form.smQuestionList.push({
    question: ' ',
    keyword: ' '
  })
}

在编辑的时候，拿到接口返回的值时,错误的做法：使得问题列表smQuestionList失去了响应式数据的性质，即data中没有了，而是重新通过.添加的

this.form = { ...res.data.data.sdQuestionInfo }
this.form.smQuestionList = [ ...res.data.data.smQuestionList ]

这样在调用新增的时候，通过vue-Devtool看到数据增加了，但视图却没有更新，当时没考虑那么多直接使用了强制刷新DOM—this.$forceUpdate()，事后想着还是不对劲，反复看了一下才发现是因为数据没有响应式，给form赋值注意按照即可

this.form = { ...this.form,  ...res.data.data.sdQuestionInfo }

记录一下