vue this.$set不起作用,vue.set()用法
本文主要介绍这个的用法。$set in vue，有一定参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
为什么用这个。VUE的$set有反应吗？分析和总结
vue中 this.$set的使用
背景:我在写前端项目的时候，后端给了我们一个json对象，我已经渲染到页面上了。但是，由于我自己的需要，我想在返回的对象中添加一个字段，所以我推入了一个字段。添加了附加内容，但页面呈现没有改变。然后我意识到它没有反应。如果我们想让这个新领域有反应，我们需要使用它。$set注入数据。
当一个已经赋值的对象或数组在vue的数据中声明时(数组中的值是一个对象)，一个新的属性被添加到对象中。如果此属性的值被更新，视图将不会被更新。
使用
这个。$set(目标，键，值)
Target:表示数据源，即要操作的数组或对象。
关键点：要操作的区域。
值：已更改的数据
来个小案例：
向对象添加年龄属性，并使其响应变化。
模板
div class=" text "
p{{list}}/p
button @click=addage /button
/div
/模板
脚本
导出默认值{
data(){
返回{
列表：{姓名：张三 }
}
},
方法：{
add(){
如果(！This.list.age){ //如果没有年龄属性，则为其添加一个年龄属性
this.list.age=18
}否则{
this.list.age
}
console.log(this.list)
}
}
}
/脚本
当我们不用这个的时候。$set添加对象属性，效果是：
数据确实已经添加，但是页面没有响应呈现年龄属性。
当我们用这个的时候。$ set (this.list， age ，18)添加属性。效果：
我们可以看到添加的数据是有响应的。
为什么能够响应式？
仔细看看，这个。$set与更多的get age和set age方法一起使用，这也是它能够响应的原因。
分析
Vue的响应原理是JavaScript对象作为数据选项传入Vue实例，Vue会遍历这个对象的所有属性，用Object.defineProperty把这些属性全部转换成getter/setter。这些getter/setter对用户来说是不可见，但是在内部，它们使Vue能够跟踪依赖关系，并在属性被访问和修改时通知变化。这里应该注意的是，在控制台上打印数据对象时，不同的浏览器对getter/setter的格式是不同的。下图来自官方文件。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。