# vue中this.$set的用法
学了那么久的vue，今天突然发现了this.$set这个用法，之前感觉没有应用场景，但是还是有用得到的地方。

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.[图片上传失败...(image-7b5243-1604976669264)]

set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，你会发现vue官网是vue.set，[vue.set的用法](https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fapi%2F%23Vue-set).
下面就展示一个应用到的场景：鼠标移入的时候显示右边的输入框和垃圾桶


这个是鼠标移入后的事件

@mouseenter="mouseenter(data)"

正常来说在方法里注入下面代码就可以显示了

mouseenter(data) {
data.del = true
},

> 但果不其然，控制台有data的数据，但是视图却没有更新到.
> 那么就需要用到这个this.$set了，修改代码为

mouseenter(data) {
this.$set(data, 'del', true)
},

> 果然，视图就如愿的更新成功了。
> 这就是this.$set的用法，希望能帮到大家

</article>