Vue框架的一個重要概念就是“響應式”,通過“雙向綁定”機制,讓數據和視圖保持實時同步。Vue的 set 方法就是用于響應式地為已有對象添加一個屬性(key)和值(value)。
Vue.set(object, key, value)
其中,object 表示要添加屬性的對象,key 表示要添加的屬性名稱,value 表示要添加的屬性的值。
使用 set 方法添加屬性時,Vue 會自動觸發組件的重新渲染,保證視圖和數據同步。
例如,在使用 v-for 渲染列表時,如果需要在用戶點擊某個列表項后動態添加一個已有字段外的屬性時,可以使用 set 方法:
// HTML 模板
<div v-for="item in list" @click="addAttr(item)"></div>
// JS 代碼
methods: {
addAttr(item) {
Vue.set(item, 'otherAttr', 'otherValue');
// 或者使用 Vue.set(item, {'otherAttr': 'otherValue'});
}
}
如果使用 JavaScript 的普通添加屬性方式,Vue 不會將其視為響應式的,即使添加成功,也不會觸發組件的重新渲染:
// 添加的屬性不能響應式更新
item.otherAttr = 'otherValue';
針對數組,Vue 提供了一系列的方法來實現響應式地更新數組數據。具體請參考 Vue 的官方文檔。
上一篇vue $el $ref
下一篇vue $get()