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