Vue之vue.$set()方法源碼案例詳解
更新時(shí)間：2021年08月30日 16:03:15 作者：lmew
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
在使用vue開(kāi)發(fā)項(xiàng)目的過(guò)程中，經(jīng)常會(huì)遇到這樣的問(wèn)題：當(dāng)vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組（數(shù)組里邊的值是對(duì)象）時(shí)，向?qū)ο笾刑砑有碌膶傩?，如果更新此屬性的值，是不?huì)更新視圖的。
這是因?yàn)樾录尤氲膶傩圆皇琼憫?yīng)式的，因此不會(huì)觸發(fā)視圖的更新，通常使用靜態(tài)方法Vue.set()或者實(shí)例方法this.$set()解決 ，使用方式：
對(duì)象：this.$set(target，key, value)
數(shù)組：this.$set(target，index, value)
但不管是靜態(tài)方法Vue.set()還是實(shí)例方法this.$set()，他們底層的實(shí)現(xiàn)邏輯是一樣的，實(shí)現(xiàn)邏輯如下：
/**
* Set a property on an object. Adds the new property and
* triggers change notification if the property doesn't
* already exist.
*/
export function set (target: Array<any> | Object, key: any, val: any): any {
// 首先判斷如果傳入的目標(biāo)對(duì)象是undefined, null, primitive(原始值)，或拋出警告
if (process.env.NODE_ENV !== 'production' &&
(isUndef(target) || isPrimitive(target))
) {
warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
}
// 判斷目標(biāo)對(duì)象target是數(shù)組，并且key是合法的索引
if (Array.isArray(target) && isValidArrayIndex(key)) {
// 取目標(biāo)數(shù)組的length值和key中較大的值作為target的length屬性
target.length = Math.max(target.length, key)
// 通過(guò)splice對(duì)key位置的元素進(jìn)行替換
target.splice(key, 1, val)
return val
}
// 如果key在目標(biāo)對(duì)象中已經(jīng)存在，則直接賦值
if (key in target && !(key in Object.prototype)) {
target[key] = val
return val
}
// 獲取target中的observer對(duì)象
const ob = (target: any).__ob__
// 如果target是vue實(shí)例或者$data直接返回
if (target._isVue || (ob && ob.vmCount)) {
process.env.NODE_ENV !== 'production' && warn(
'Avoid adding reactive properties to a Vue instance or its root $data ' +
'at runtime - declare it upfront in the data option.'
)
return val
}
// 如果ob不存在，說(shuō)明target不是響應(yīng)式對(duì)象，直接賦值，不觸發(fā)視圖更新
if (!ob) {
target[key] = val
return val
}
// 如果ob存在，把key設(shè)置為響應(yīng)式屬性
defineReactive(ob.value, key, val)
// 發(fā)送通知，觸發(fā)視圖更新
ob.dep.notify()
return val
}
以上是vue 中set方法的源碼，在這里需要特別注意的是，在對(duì)數(shù)組進(jìn)行處理時(shí)，所用的splice方法并不是數(shù)組本身的方法，而是在vue中封裝的具有響應(yīng)式的數(shù)組方法。
到此這篇關(guān)于Vue之vue.$set()方法源碼案例詳解的文章就介紹到這了,更多相關(guān)Vue之vue.$set()方法源碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue3中proxy的基本用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue使用關(guān)于speak-tss插件的詳細(xì)介紹及一些配置項(xiàng)
本文詳細(xì)介紹了speak-tss插件在Vue3中的使用方法和配置,首先需要下載依賴,然后引入插件,并進(jìn)行實(shí)例化和配置,配置項(xiàng)包括音量、語(yǔ)言、語(yǔ)音、語(yǔ)速、音調(diào)等,speak-tss支持多種語(yǔ)言和語(yǔ)音,適用于需要文本語(yǔ)音播報(bào)的場(chǎng)景2024-09-09
通過(guò)配置多頁(yè)面應(yīng)用，從而將給子模塊依賴分隔開(kāi)各自加載，可以減少初始資源的請(qǐng)求，加快頁(yè)面的訪問(wèn)速度，這篇文章主要介紹了vue3+vite配置多頁(yè)面的詳細(xì)過(guò)程,需要的朋友可以參考下2023-06-06
在Vue3中,toRaw方法允許用戶獲取響應(yīng)式對(duì)象的原始值,有助于性能優(yōu)化和與外部庫(kù)集成,它通過(guò)繞過(guò)Vue的響應(yīng)式系統(tǒng),僅在必要時(shí)觸發(fā)更新,從而提升效率,本文就來(lái)具體介紹一下,感興趣的可以了解一下2024-09-09
在 Vue 3 中,一個(gè)重要的特性是 watch 選項(xiàng),它允許開(kāi)發(fā)者對(duì)數(shù)據(jù)變化進(jìn)行觀察,本篇博客將詳細(xì)介紹如何在 Vue 3 中使用 watch 進(jìn)行深度觀察,特別是在使用 setup 語(yǔ)法糖時(shí),需要的朋友可以參考下2024-11-11
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開(kāi)發(fā)中用el-upload能滿足大部分場(chǎng)景，但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢，所以自己基于el-upload封裝了一個(gè)切片上傳組件，希望對(duì)大家有所幫助2023-03-03
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,這篇文章主要給大家介紹了關(guān)于vue3中vuex與pinia踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了通過(guò)原生vue添加滾動(dòng)加載更多功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue3.0-monaco組件封裝存檔代碼解析,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03