vue的set方法是我們在開發Vue應用時經常使用的一個方法,它可以用于動態地給Vue實例和組件添加響應式的屬性。當你需要給Vue實例或組件添加新屬性時,如果不使用set方法,那么添加的屬性不會被Vue跟蹤更新,也就無法響應式渲染到頁面上。因此,set方法可以說是Vue響應式系統中非常重要的一個方法。
Vue.set(obj, key, value)
set方法的語法很簡單,它只有三個參數,第一個參數是要添加屬性的目標對象,第二個參數是要添加的屬性名,第三個參數是要添加的屬性值。如果目標對象是Vue實例或組件,則還可以使用$set方法來調用這個方法,使用起來更加方便。
this.$set(this.obj, 'attr', value)
在使用set方法時,需要注意以下幾點:
1、如果目標對象不是Vue實例或組件,則無法使用$set方法,只能使用Vue.set方法。
let obj = { name: 'Alice' }
Vue.set(obj, 'age', 18)
console.log(obj.age) // 18
2、如果要添加的屬性是一個嵌套的對象,則需要先使用set方法給嵌套對象的父級對象添加一個響應式屬性。
let obj = { user: { name: 'Alice' } }
Vue.set(obj, 'user', Object.assign({}, obj.user, { age: 18 }))
console.log(obj.user.age) // 18
3、不能使用set方法對數組進行添加和刪除操作。Vue提供了一些專門的方法來實現對數組的響應式更新,如push、pop、splice等。
let arr = [1, 2, 3]
arr.push(4)
console.log(arr) // [1, 2, 3, 4]
從上述例子中我們可以看到,使用push方法將元素添加到數組中,Vue會自動檢測到數組的變化并重新渲染頁面。
總之,set方法的作用就是給Vue實例和組件添加響應式的屬性,以便在屬性發生變化時能夠自動重新渲染頁面。如果你不確定是否需要使用set方法,可以先嘗試直接給對象賦值,如果發現頁面沒有響應式更新,則可以考慮使用set方法。
上一篇c 轉換json數據
下一篇dart解析json