學了那么久的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的用法，希望能幫到大家