vue中this.$set的用法

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

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')，你会发现vue官网是vue.set，vue.set的用法.
下面就展示一个应用到的场景：鼠标移入的时候显示右边的输入框和垃圾桶

image.png image.png

这个是鼠标移入后的事件

@mouseenter="mouseenter(data)"

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

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

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

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

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