關(guān)于Vue中this.$set的正確使用
this.#set(obj, key, value)
我們在項目開發(fā)的過程中，經(jīng)常會遇到這種情況：為data中的某一個對象添加一個屬性
<template>
<div class="hello">
<button @click="setMessage">添加屬性</button>
{{ student.name }}
<input type="text" v-model="student.age">
</div>
</template><script>
export default {
data() {
return {
student: {
name: '張三',
}
}
},
methods: {
setMessage() {
this.student.age = 15
console.log(this.student)
}
}
}
</script>當(dāng)我們點(diǎn)擊按鈕，為student添加一個age屬性，看看視圖層是否能夠更新
在這里我們發(fā)現(xiàn)雖然這個對象身上已經(jīng)有了該屬性，但是視圖層并沒有更新該數(shù)據(jù)，是什么造成的呢？由于受JavaScript的限制，vue.js不能監(jiān)聽對象屬性的添加和刪除，因?yàn)樵趘ue組件初始化的過程中，會調(diào)用getter和setter方法，所以該屬性必須是存在在data中，視圖層才會響應(yīng)該數(shù)據(jù)的變化
那么，我們該如何解決這個問題呢
解決這個問題的方法大體有兩種：
1.使用this.$set(obj, key, value)/vue.set(obj, key, value)
<script>
export default {
data() {
return {
student: {
name: '張三',
}
}
},
methods: {
setMessage() {
this.$set(this.student, 'age', 15)
console.log(this.student)
}
}
}
</script>2.通過Object.assign(target, sources)方法
<script>
export default {
data() {
return {
student: {
name: '張三',
}
}
},
methods: {
setMessage() {
this.student.age = 15
this.student = Object.assign({}, this.student)
console.log(this.student)
}
}
}
</script>我們發(fā)現(xiàn)，通過這兩種方式為對象添加屬性之后，他的對象身上多了get和set方法，所以，此時我們再次操作該屬性的時候，就會引起視圖的更新啦
到此這篇關(guān)于this.$set的正確使用的文章就介紹到這了,更多相關(guān)this.$set的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識,我們先來從Vue提供的Vue.set()和this.$set()這兩個api看看它內(nèi)部是怎么實(shí)現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到template中，這篇文章主要介紹了Vue中的偵聽器watch,需要的朋友可以參考下2022-10-10
Vue.js的組件可以理解為預(yù)先定義好了行為的ViewModel類。這篇文章主要介紹了Vue.js組件使用開發(fā)實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了淺談 Vue 項目優(yōu)化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue?element-plus中el-input修改邊框border的方法
element樣式還是蠻好的,只是有時候我們需要做一些調(diào)整,比如el-input的邊框,下面這篇文章主要給大家介紹了關(guān)于vue?element-plus中el-input修改邊框border的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue3+Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持,本文將介紹如何在Vue 3中使用Vue Router實(shí)現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
vue結(jié)合vant實(shí)現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合vant實(shí)現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue?axios接口請求封裝方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue+elementUI導(dǎo)出word打印方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04