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

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

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

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

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

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

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

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

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

解决方案：

demo:

<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()