vue this.$set 给data对象新增属性，并触发视图更新

   向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性     

   
   

     
     

      
      

     
     
     
     

      
      

       
       data () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       return {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
        
       
       user: {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       name: 
       
       '',
      
      
     
     

     
     

      
      

     
     
     
     

      
      
            
       
       id: 
       
       ''
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
               }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

如果我们直接给user增加属性

   
   

     
     

      
      

     
     
     
     

      
      

       
       mounted () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       this
       
       .user
       
       .age
       
        = 
       
       30
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

虽然user的属性值跟随变化，但是页面上的视图是不发生任何刷新的，也是只展示name/id的值，age值还是为空。

原因是由于js的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

此时要解决上述问题，给对象添加属性的时候，页面视图跟着刷新，可以用set的方法：

正确写法：this.$set(this.data,”key”,value’)

   
   

     
     

      
      

     
     
     
     

      
      

       
       mounted () {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
    
       
       this.$
       
       set(
       
       this.user,
       
       "age", 
       
       30)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

还有一种情况是给已有对象添加多个属性，可能会用到Object.assgin()，这种情况，应该用两个对象创建一个新对象

不要这样写：

Object.assign( this.user, {
  tel: 18888888888,
  sex: 'Y'
})

而应该这样写：

this.user = Object.assign( {}, this.user, {
  tel: 18888888888,
  sex: 'Y'
})
原文链接:https://blog.csdn.net/zhaoyangguang021/article/details/80999919