關(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中如何運(yùn)用TS語(yǔ)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例
SVG全稱(chēng)Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項(xiàng)目開(kāi)發(fā)過(guò)程中,我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后,頁(yè)面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例,需要的朋友可以參考下2024-07-07
vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法
今天小編就為大家分享一篇vue2中,根據(jù)list的id進(jìn)入對(duì)應(yīng)的詳情頁(yè)并修改title方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
這篇文章主要給大家介紹了關(guān)于Vue.js列表渲染的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-05-05
Vue3使用MD5加密實(shí)戰(zhàn)案例(清晰明了)
MD5是一種信息摘要算法(對(duì)稱(chēng)加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個(gè)128位(16字節(jié))的散列值,用來(lái)確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue3計(jì)算屬性是如何實(shí)現(xiàn)的，對(duì)于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，我們都應(yīng)該使用計(jì)算屬性，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-08-08
antd?select?多選限制個(gè)數(shù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了antd?select?多選限制個(gè)數(shù),實(shí)現(xiàn)思路和核心代碼都很簡(jiǎn)單，其中核心代碼在于disabled，代碼簡(jiǎn)單易懂需要的朋友可以參考下2022-11-11
vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn)
這篇文章主要介紹了vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-09
詳解Vue的組件中data選項(xiàng)為什么必須是函數(shù)
這篇文章主要給大家介紹了關(guān)于Vue的組件中data選項(xiàng)為什么必須是函數(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08