reactive方法createReactiveObject速覽(1)

reactive定義是通過createReactiveObject方法實現的糟红,以下簡述其內容
1.判斷傳入的值媳否,如果不是object類型的棵逊,直接返回當前值

  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }

示例如下:
const notObj = reactive(1)
console.log(notObj) // 1 警告:value cannot be made reactive: 1

2.如果傳入的值已經進行proxy代理,并且不是只讀的reactive對象唬渗,直接返回當前值

  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }

示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(reactiveVal1)
console.log(reactiveVal1 === reactiveVal2) // true

3.如果proxyMap映射中已經存在該對象的proxy映射乐导,則直接返回之前映射的內容

  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(obj)
console.log(reactiveVal1 === reactiveVal2) // true

4.一些特殊的值是不能進行proxy代理的,如日期浸颓、正則物臂、promise,直接返回傳入的值

  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }

示例如下:
const date = new Date()
const notAllowObj = reactive(date)
console.log(notAllowObj) // Wed Feb 01 2023 20:15:33 GMT+0800 (中國標準時間)

5.其他對象产上,Array/Object通過baseHandlers對象進行代理棵磷,
Map/Set/WeakMap/WeakSet通過collectionHandlers對象進行代理

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy

下文則繼續(xù)對本文中提到的baseHandlers對象進行展開!
本人菜雞晋涣,有問題望前輩及時指出仪媒,不勝感激!谢鹊!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末算吩,一起剝皮案震驚了整個濱河市留凭,隨后出現的幾起案子,更是在濱河造成了極大的恐慌偎巢,老刑警劉巖蔼夜,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異压昼,居然都是意外死亡求冷,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門窍霞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來匠题,“玉大人,你說我怎么就攤上這事但金【律剑” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵傲绣,是天一觀的道長掠哥。 經常有香客問我,道長秃诵,這世上最難降的妖魔是什么续搀? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮菠净,結果婚禮上禁舷,老公的妹妹穿的比我還像新娘。我一直安慰自己毅往,他們只是感情好牵咙,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著攀唯,像睡著了一般洁桌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上侯嘀,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天另凌,我揣著相機與錄音,去河邊找鬼戒幔。 笑死吠谢,一個胖子當著我的面吹牛,可吹牛的內容都是我干的诗茎。 我是一名探鬼主播工坊,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了王污?” 一聲冷哼從身側響起罢吃,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎玉掸,沒想到半個月后刃麸,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡司浪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年泊业,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啊易。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡吁伺,死狀恐怖,靈堂內的尸體忽然破棺而出租谈,到底是詐尸還是另有隱情篮奄,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布割去,位于F島的核電站窟却,受9級特大地震影響,放射性物質發(fā)生泄漏呻逆。R本人自食惡果不足惜夸赫,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望咖城。 院中可真熱鬧茬腿,春花似錦、人聲如沸宜雀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辐董。三九已至悴品,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間简烘,已是汗流浹背他匪。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留夸研,地道東北人。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓依鸥,卻偏偏與公主長得像亥至,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內容