本篇文章带大家聊聊Vue中的Vue.set和this.$set，介绍一下Vue.set和this.$set用法与使用场景，希望对大家有所帮助！
一、为什么有Vue.set
由于JavaScript的限制，Vue无法检测到data中数组和对象的变化，因此也不会触发视图更新。
二、解决方法
数组
1.使用Vue提供的变异方法
Vue对这些JS数组方法进行了封装，通过这些方法是可以检测到数组更新的。
2.将原数组整个替换
如下例中，是要实现vm.items[1] = 'excess'
<body><divid="app"><ul><liv-for="(item,index)initems">{{index}}:{{item}}</li></ul></div><script>letvm=newVue({el:'#app',data:{items:['a','b','c']},created(){this.items=['a','test','c']}})</script></body>
3.使用Vue.set（见后文）
对象
1、将原对象整个替换
如下例中，是要实现给object新增一个键值对{test: 'newthing'}
<body><divid="app"><ul><liv-for="(value,name)inobject">{{name}}:{{value}}</li></ul></div><script>letvm=newVue({el:'#app',data:{object:{title:'HowtodolistsinVue',author:'JaneDoe',publishedAt:'2016-04-10'}},created(){this.object={title:'HowtodolistsinVue',author:'JaneDoe',publishedAt:'2016-04-10',test:'newthing'}}})</script></body>
2.使用Vue.set（见后文）
三、Vue.set
对于数组
Vue不能检测以下数组的变动:
利用索引值直接设置一个数组项时，例如vm.list[0]=newValue
修改数组长度时，例如vm.list.length=newLength
举个栗子
varvm=newVue({data:{items:['a','b','c']}})vm.items[1]='x'//不是响应性的vm.items.length=2//不是响应性的
这时可以使用Vue.set或者this.$set
使用方法
Vue.set(target,index,newValue)
//Vue.setVue.set(vm.items,indexOfItem,newValue)//this.$setvm.$set(vm.items,indexOfItem,newValue)
对于对象
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。
举个栗子
varvm=newVue({data:{a:1}})//`vm.a`是响应式的vm.b=2//`vm.b`是非响应式的
使用方法
Vue.set(target,key,value)
Vue.set(vm.someObject,'b',2)this.$set(this.someObject,'b',2)
注意
Vue不允许动态添加根级响应式属性
constapp=newVue({data:{a:1}//render:h=>h(Suduko)}).$mount('#app1')Vue.set(app.data,'b',2)
只可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性
varvm=newVue({el:'#test',data:{//data中已经存在info根属性info:{name:'小明';}}});//给info添加一个性别属性Vue.set(vm.info,'sex','男');
四、使用场景
当我们对data中的数组或对象进行修改时，有些操作方式是非响应式的，Vue检测不到数据更新，因此也不会触发视图更新。此时需要使用Vue.set()进行响应式的数据更新。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：http://www.chanpinyuan.cn/33462.html；
