vue数组修改不触发视图更新、vue向响应式对象添加或删除属性

客官°小女子只卖身不卖艺 2021-09-17 03:22 884阅读 0赞

**背景：在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][https_cn.vuejs.org_v2_api_Vue-set]

[https_cn.vuejs.org_v2_api_Vue-set]: https://cn.vuejs.org/v2/api/#Vue-set