总结vue中data添加新属性的三种方式

原理分析

首先在了解这三种方式之前，我觉的有必要说一下，为啥不能直接手动给data中的对象添加属性呢？ 下面咱们一块分析下： vue2 是通过数据劫持 “Object.defineProperty” 实现数据响应式；

const obj = {
          
   };
        let val = kk
        Object.defineProperty(obj,name,{
          
   
            get(){
          
   
                console.log(访问了)
                return val
               
            },
            set(newval){
          
   
                if(newval !==val)
                val = newval;
                 console.log(设置,newval)
            }
        })

在我们访问或者设置obj.name的时候，会相继出发 setter，getter；然而在给obj添加属性的时候，却没有触发属性拦截； 其实上边的代码是将obj对象的name属性设置成了响应式数据，但是新添加的属性并没有通过Object.defineProperty 设置成响应式，所有这就是为什么vue 的data中对象新加属性页面无法更新，但是数据上却又我们新加属性的原因。

三种方式

1.Vue.set()

Vue.set( target, propertyName/index, value ) 参数 {Object | Array} target {string | number} propertyName/index {any} value 返回值：设置的值

通过Vue.set向响应式对象中添加一个property，并确保这个新 property同样是响应式的，且触发视图更新

data() {
          
   
    return {
          
   
        msg:{
          
   
            name:黑泽明,
            hero:true
        }    
    }
},
methods: {
          
   
    addProperty(){
          
   
        this.$set(this.msg, sex, 男)
    }
},

2.Object.assign()

直接使用Object.assign()添加到对象的新属性不会触发更新。

应创建一个新的对象，合并原对象和混入对象的属性

data() {
          
   
        return {
          
   
            msg:{
          
   
                name:黑泽明,
                hero:true
            }    
        }
    },
   addProperty(){
          
   
            this.msg = Object.assign({
          
   },this.msg,{
          
   sex:name});
        },

3.$forceUpdate

$forceUpdate迫使Vue 实例重新渲染

data() {
          
   
    return {
          
   
        msg:{
          
   
            name:黑泽明,
            hero:true
        }    
    }
},
addProperty(){
          
   
       this.msg.sex = 男;
       this.$forceUpdate() 
    },

小结

对象中添加少量的新属性，可以直接采用Vue.set() 对象中添加多个新属性，则通过Object.assign()创建新对象 如果你实在不知道怎么操作时，可采取$forceUpdate()进行强制刷新 (不建议)