Vue的set方法是更新Vue實例中的屬性值,使用set方法可以讓Vue實例監聽到屬性值的改變,并且能夠自動更新視圖。
// 語法 Vue.set(object, key, value) // 示例 Vue.set(this.item, 'name', 'Vue')
其中,object表示要更新的對象,key表示要更新的屬性名,value表示要更新的屬性值。
假設有以下代碼:
data() { return { item: { name: 'JavaScript' } } }
如果要更新name屬性的值為'Vue',可以直接使用this.item.name = 'Vue'。但是,由于Vue實例是響應式的,只有在使用set方法時,Vue才能跟蹤到屬性的變化。
this.item.name = 'Vue' // 不建議使用 // 推薦使用 Vue.set(this.item, 'name', 'Vue')
注意,在使用set方法之前,必須先定義好要更新的對象和屬性名。如果要動態更新對象或屬性名,可以使用Vue.set的另一種語法形式。
this.$set(this.item, 'name', 'Vue')
Vue還提供一個全局方法$set,可以在任何組件中使用。$set方法的語法和Vue.set相同。
除了使用Vue.set方法外,Vue還提供了一個輔助類函數Vue.observable,可以將一個普通對象轉換成響應式對象。
const state = Vue.observable({ count: 0 }) function increment() { state.count++ }
在這里,state對象是普通對象,但是通過Vue.observable方法,將其轉換成了響應式對象。這樣,當count屬性的值改變時,Vue就會自動更新視圖。
總結一下,Vue.set方法是更新Vue實例中屬性值的常用方法。可以讓Vue實例監聽屬性值的改變,并及時更新視圖。當需要動態更新對象或屬性名時,可以使用Vue.set的另一種語法形式。同時,Vue.observable方法可以將一個普通對象轉換成響應式對象,實現數據的自動更新。