更新時(shí)間:2024-02-28 來源:黑馬程序員 瀏覽量:
在Vue中,當(dāng)我們使用vm.$set()方法時(shí),我們可以解決對(duì)象新增屬性不能響應(yīng)的問題。這種情況通常出現(xiàn)在我們想要?jiǎng)討B(tài)地向Vue實(shí)例的數(shù)據(jù)對(duì)象添加新的屬性時(shí)。
下面是使用vm.$set()方法的示例:
// 創(chuàng)建一個(gè) Vue 實(shí)例 var vm = new Vue({ data: { userProfile: { name: 'John Doe', age: 30 } } }) // 此時(shí) 'userProfile' 對(duì)象的 'name' 和 'age' 屬性是響應(yīng)式的 // 但如果我們嘗試添加一個(gè)新屬性,比如 'email' vm.userProfile.email = 'john@example.com' // 上面這樣添加屬性,Vue 不會(huì)自動(dòng)進(jìn)行響應(yīng)式更新 // 為了解決這個(gè)問題,可以使用 vm.$set() vm.$set(vm.userProfile, 'email', 'john@example.com') // 現(xiàn)在 'email' 屬性已經(jīng)是響應(yīng)式的了
使用vm.$set(object, key, value)方法可以告訴Vue庫在一個(gè)已經(jīng)創(chuàng)建的對(duì)象上添加一個(gè)新屬性,并確保這個(gè)新屬性是響應(yīng)式的。