Vue中this.$set如何为data中某一对象添加一个属性

小编给大家分享一下Vue中this.$set如何为data中某一对象添加一个属性，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

在成都做网站、网站设计过程中，需要针对客户的行业特点、产品特性、目标受众和市场情况进行定位分析，以确定网站的风格、色彩、版式、交互等方面的设计方向。成都创新互联公司还需要根据客户的需求进行功能模块的开发和设计，包括内容管理、前台展示、用户权限管理、数据统计和安全保护等功能。

项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性以后，但是视图层并没有更新该数据。如 ：

    data() {			
        return {	
          list: [],				    
		    listCatchData:{}
	        }
	}

如上所示, 切换swiper时, 发现虽然对象 listCatchData[index] 已经对应了不同组的数据，但是视图层并没有更新该数据，是什么造成的呢？这是由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以你添加的属性必须已经存在于data中，视图层才会响应该数据的变化。

那我们如何使vue实例 data里的对象添加某一属性后，视图层也会更新该数据呢？

解决方发:

1. this.$set(obj, key, value)

    async getList(current) 
    {				 
		const res = await this.$myRequest({
				    url: 'uniapi/getList',					
                    data:{catid:this.tab[current].catid}
		                })				
                const {data} = res				 
				this.$set(this.listCatchData,current,data)
			    console.log(this.listCatchData);//这时发现该对象已经出现了getter与setter方法
        }

2.  Object.assign(target, sources)方法

        async getList(current) 
        {				 
		const res = await this.$myRequest({
				    url: 'uniapi/getList',					
                                    data:{catid:this.tab[current].catid}
		                })				
                                const {data} = res				 
				this.listCatchData[current] = data
			        this.listCatchData = Object.assign({},this.listCatchData)
        }

通过这两种方式为对象添加属性之后，他的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新。

以上是“Vue中this.$set如何为data中某一对象添加一个属性”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！