背景：在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)返回获取的新对象替换原有对象；

注意：注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

 

  

 

参考网址：vuejs API ：https://cn.vuejs.org/v2/api/#Vue-set