VUE.JS中有一個非常實用的方法，那就是“that.$set()”方法，這個方法可以動態添加對象屬性或數組元素并能夠自動更新視圖。若是在更新組件時需要改變響應式數據中的數組元素或對象屬性，可以使用這個方法。

在Vue生命周期的鉤子函數中，如果添加一個屬性或數組元素，會自動更新視圖，但是如果是在生命周期之外的情況下更新一個元素，Vue并不會自動更新視圖。我們需要使用“$set”方法手動觸發響應式屬性的更新，否則會發現更新無效。

使用“$set”方法動態添加屬性

export default {
data () {
return {
user: {
name: 'Jack',
age: 24
}
}
},
methods: {
setName () {
this.$set(this.user, 'name', 'Tom')
}
}
}

在這個例子中，我們有一個名為“user”的對象，它有兩個屬性：name、age。我們想動態添加一個名為“gender”的屬性，使用“this.$set”方法可以實現。下面看看修改屬性與數組元素。

修改屬性示例

const vm = new Vue({
data: {
user: {
name: 'Jack',
age: 24,
gender: '男'
}
},
created () {
setTimeout(() =>{
this.user.name = 'Tom'
}, 1500)
}
})

在這個示例中，我們首先聲明了一個名為“user”的對象，并在創建鉤子函數中通過setTimeout函數修改了該對象中的姓名屬性。但是，Vue并沒有重新渲染視圖，因此需要使用“$set”方法來手動觸發強制更新。

修改數組示例

const vm = new Vue({
data: {
list: [
{ name: 'Apple', price: 5 },
{ name: 'Orange', price: 3 },
{ name: 'Banana', price: 2 }
]
},
created () {
setTimeout(() =>{
this.list.splice(0, 1, { name: 'Pear', price: 4 })
}, 1500)
}
})

在這個示例中，首先聲明了名為“list”的數組，我們使用splice方法更新了該數組中的第一項（即將'Apple'替換為'Pear'），這樣也需要使用“$set”方法手動觸發強制更新。

總之，that.$set方法可以有效解決在外部更新data數據的時候，Vue框架無法響應這些數據更新而導致DOM不渲染的問題。所以，使用Vue編寫前端代碼時，在修改數組元素和對象屬性時一定要使用“$set”這個方法強制更新。