当数组或者对象发生变化的时候，视图不刷新

背景：在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况

以下4种情况不触发vue响应式更新！！

不能检测到的数组变动是：

1、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue；

2、当修改数组的长度时，例如：vm.items.length = newLength；

不能检测到的对象变动是：

3、向响应式对象添加属性；

4、向响应式对象删除属性；

解决方案：

demo:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

<template>     <div class="hello">         <div v-for="(item,index) in students" :key="index">             <span>姓名:{{item.name}} </span> /             <span>年龄:{{item.age}}</span> /             <span>索引:{{index}}</span>         </div>         <hr>         <span v-for="(prop,index) in oneTeacher" :key="index"> {{prop}} / </span>         <hr>         <p><button @click="changeArr()">点击正常修改对象属性</button></p>         <p>视图无响应：             <button @click="indexChangeProp()">点击使用索引修改数组内容</button>             <button @click="lengthChangeProp()">点击更改对象length数组长度</button>               <button @click="addProp()">点击向响应式对象添加属性</button>             <button @click="deleteProp()">点击向响应式对象删除属性</button>         </p>         <hr>         <p>对应解决方法：             <button @click="changeArr()">js完全替换掉数组</button>             <button @click="methodsChangeArr()">使用JavaScript方法可以获取修改后返回的新数组</button>               <button @click="setChangeprop()">使用vue的set方法向响应式对象添加属性</button>             <button @click="deletChangeprop()">使用vue的delete方法向响应式对象删除属性</button>             <button @click="assignChangeprop()">使用JS的Object.assign({},o1,o2)方法向对象添加属性</button>         </p>     </div> </template>   <script>   export default {     name: 'HelloWorld',     data () {       return {         msg: 'Welcome to Your Vue.js App',         students:[           {name:"张三",age:27},           {name:"李四",age:29}         ],         oneTeacher:{name:"诸葛孔明",age:1000}       }     },     methods:{ //该函数中直接进行了数组替换，大量数据处理时不合适       changeArr:function(){         let that=this;         that.students=[           {name:"张三",age:18},           {name:"李四",age:18}         ]       },   //根据索引修改数组对象,视图没有更新       indexChangeProp:function(){         let that=this;         that.students[0]={name:"王五",age:33};         console.log(that.students);       },   //改变数组长度,视图没有更新       lengthChangeProp:function(){         let that=this;         that.students.length=5;         console.log(that.students);       },   //向响应式对象添加属性,视图没有更新       addProp:function(){         let that=this;         that.oneTeacher.studentNum=100;         console.log(that.oneTeacher);       },   //向响应式对象删除属性,视图没有更新       deleteProp:function(){         let that=this;         delete that.oneTeacher.age;         console.log(that.oneTeacher);       },   //使用JavaScript的数组方法获取返回的数组       methodsChangeArr:function(){         let that=this;         let newStudent={name:"小乔",age:16};         that.students.push(newStudent);         console.log(that.students);       },   //使用vue的set方法向响应式对象添加属性       setChangeprop:function(){         let that=this;         that.$set(that.oneTeacher,"studentNum","200个学生");         console.log(that.oneTeacher);       },   //使用vue的delete方法向响应式对象删除属性       deletChangeprop:function(){         let that=this;         that.$delete(that.oneTeacher,"age");         console.log(that.oneTeacher);       },   //assign()方法合并多个对象返回新的对象进而达到添加对象属性的效果       assignChangeprop:function(){         let that=this,obj1,newObj;         obj1={sex:"男"}; //newObj=Object.assign(that.oneTeacher,obj1); //无效，并未替换原有对象         newObj=Object.assign({},that.oneTeacher,obj1);         that.oneTeacher=newObj;         console.log(that.oneTeacher);         },       }   } </script>

解决方法总结：
1、创建新的数组替换原有数组值

2、使用JavaScript的数组操作函数，这些方法都会返回一个新数组，也是数组替换原理；

3、使用vue自带的 vue.set(object , key , value );?向响应式对象添加属性；

4、使用vue自带的 vue.delete(object , key );?向响应式对象删除属性；

5、对象添加属性还可以使用Object.assign({},obj1,obj2)返回获取的新对象替换原有对象；

附加能监听到的：

- push() - pop() - shift() - unshift() - splice() - sort() - reverse()