vue中 this.$set的使用詳解
vue中 this.$set的使用
背景:在我寫前端項(xiàng)目的時(shí)候,后端給我們的一個(gè)json對(duì)象,并且我已經(jīng)渲染在頁(yè)面上了。但是由于我自己的需求,想往返回的對(duì)象里面添加一個(gè)字段,于是我用push一個(gè)字段進(jìn)去,添加是添加進(jìn)去了,但是頁(yè)面渲染卻沒有變化。后來(lái)才意識(shí)到不是響應(yīng)式的。如果我們要讓這個(gè)新字段是響應(yīng)式的,就要使用到this.$set來(lái)注入數(shù)據(jù)
當(dāng)vue的data里邊聲明或者已經(jīng)賦值過的對(duì)象或者數(shù)組(數(shù)組里邊的值是對(duì)象)時(shí),向?qū)ο笾刑砑有碌膶傩?,如果更新此屬性的值,是不?huì)更新視圖的。
使用
this.$set( target, key, value)
target
:表示數(shù)據(jù)源,即是你要操作的數(shù)組或者對(duì)象
key
:要操作的的字段
value
:更改的數(shù)據(jù)
來(lái)個(gè)小案例:
給一個(gè)對(duì)象添加一個(gè)年齡屬性并且讓它可以響應(yīng)式的進(jìn)行改變
<template> <div class="text"> <p>{{list}}</p> <button @click="add">age++</button> </div> </template> <script> export default { data(){ return { list:{ name: "張三"} } }, methods: { add(){ if(!this.list.age){ // 如果沒有age屬性就給它添加一個(gè)age屬性 this.list.age=18 }else{ this.list.age++ } console.log(this.list) } } } </script>
當(dāng)我們沒有使用this.$set
去添加對(duì)象屬性的時(shí)候,效果:
數(shù)據(jù)確實(shí)已經(jīng)添加進(jìn)去了,但是頁(yè)面并沒有響應(yīng)式的渲染age屬性。
當(dāng)我們使用this.$set(this.list,‘a(chǎn)ge',18)
去添加一個(gè)屬性之后。效果:
我們能看見添加的數(shù)據(jù)是響應(yīng)式的。
為什么能夠響應(yīng)式?
仔細(xì)觀察一下,使用了this.$set 多了get age和set age方法,這正是能夠響應(yīng)式的原因
分析
Vue的響應(yīng)式原理為 JavaScript 對(duì)象傳入 Vue 實(shí)例作為 data 選項(xiàng),Vue 將遍歷此對(duì)象所有的 property,并使用 Object.defineProperty 把這些 property 全部轉(zhuǎn)為 getter/setter。這些 getter/setter 對(duì)用戶來(lái)說(shuō)是不可見的,但是在內(nèi)部它們讓 Vue 能夠追蹤依賴,在 property 被訪問和修改時(shí)通知變更。這里需要注意的是不同瀏覽器在控制臺(tái)打印數(shù)據(jù)對(duì)象時(shí)對(duì) getter/setter 的格式化并不同,下圖來(lái)自官方文檔。
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue實(shí)現(xiàn)吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的吸頂、錨點(diǎn)和滾動(dòng)高亮按鈕效果,需要的朋友可以參考下2019-10-10vue+Element?ui實(shí)現(xiàn)照片墻效果
這篇文章主要為大家詳細(xì)介紹了vue+Element?ui實(shí)現(xiàn)照片墻效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料,及代理跨域的概念原理,需要的朋友可以參考下2018-04-04用Vue.extend構(gòu)建消息提示組件的方法實(shí)例
本篇文章主要介紹了用Vue.extend構(gòu)建消息提示組件的方法實(shí)例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08vue+egg+jwt實(shí)現(xiàn)登錄驗(yàn)證的示例代碼
這篇文章主要介紹了vue+egg+jwt實(shí)現(xiàn)登錄驗(yàn)證的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05vue3項(xiàng)目中配置sass,vite報(bào)錯(cuò)Undefined mixin問題
這篇文章主要介紹了vue3項(xiàng)目中配置sass,vite報(bào)錯(cuò)Undefined mixin問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06