VUE：JS中进行数组对象赋值，页面不能实时回显

简介

VUE项目中，有时候进行 数组对象 赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。

具体实现

场景一：对象赋值新的属性时，页面不能回显。

原因：该对象本身是没有这个属性的。
解决方案：

  this.$set(obj, 属性名, 属性值)；

案例如：

  this.$set(obj, "name", "张三");

场景二：数组赋值新的属性时，页面不能回显。

原因：VUE中由于 JavaScript 的限制，Vue 不能检测数组第 i 个的修改操作。
举例：习惯写法是如下的，但是能打印出来，页面不能回显。

data() {
  return: {
    arr: [ [], [], [] ]
  }
},
methode() {
  init() {
    let arrTwo = [1, 2];
    this.arr[1] = arrYwo;
  }
}

**解决方案：**有效写法如下

data() {
  return: {
    arr: [ [], [], [] ]
  }
},
methode() {
  init() {
    let arrTwo = [1, 2];
    let newArr = [ ...this.arr ];
    arrTwo.forEaach(item => {
      newArr.push(item);
    })
    this.$set(arr, 1, [ ...newArr ]);
  }
}

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！