當數組或者對象發生變化的時候，視圖不刷新

背景：在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()