【 vue2中数据改变，视图不变】

vue2中数据改变，视图不变

*本篇文章具体介绍了 vue2中数据改变，视图不变 的原理 ，以及解决方法

一、为什么会出现数据改变，视图不变

在vue2 中双向数据绑定是通过 ObjectDefineProperty 来实现的 ，只监听data数据存在的变量，所以我们在循环添加新值的时候 监听不到 所以才会出现 数据改变 视图不变的现象
在vue3中不会出现 他的双向数据是 proxy 会监听一整个数据

二、解决方法

1、this.$set

this.$set( 目标对象/数组，属性/下标，强制修改的值 )
1）对象

  var obj = {}
 //   this.obj.a=1   
 //   this.$set(this.obj, "a", 1);   
 不使用 this.$set方法的 直接打印是 数据改变，视图不变的
 //   console.log(this.obj);  /

2）数组

 var arr = []
 // this.arr[0] = 1
 // this.$set(this.arr, 0 , 1)
 
 这是第二种方法   JSON.parse(JSON.stringify())
 
 // this.arr = JSON.parse(JSON.stringify(this.arr));
  不使用 this.$set方法的 直接打印是 数据改变，视图不变的
 // console.log(this.arr);

3）数组包对象

var datalist = [  {} , {}  ]
 // 1) 根据对象来
 //   this.datalist[0].a = "hhh";
 //   this.$set(this.datalist[0], "a", "hhh");
 //   2)根据数组
 //   this.$set(this.datalist, 0, { a: "hehehe" });
 //   console.log(this.datalist);
 //   this.datalist = JSON.parse(JSON.stringify(this.datalist));
 //   console.log(this.datalist);

2, JSON.parse(JSON.stringify())

1. 数组

 var arr =  []
 // this.arr[0] = 1
 // this.arr = JSON.parse(JSON.stringify(this.arr));
 // console.log(this.arr);

2. 数组包对象

  var datalist = [  {} , {}  ]
  this.datalist[0].a = "hhh";
  this.datalist = JSON.parse(JSON.stringify(this.datalist));

总结 ：

在vue 2 中 出现 数据改变，视图不变的时候
可以 通过 ：：：：：
1.this.$set来解决有三个参数（ 目标对象/数组，属性/下标，强制修改的值）
2.JSON.parse(JSON.stringify()) 来解决