我是這麼理解Vue中的響應式系統的

2021-09-11 09:44:54 字數 1185 閱讀 1627

遇到知識,尤其是複雜的概念,我不能模擬的話,我很難接收(所以學習很差...)。在看了大神染陌同學的vue原始碼解析後,我想分享一下我所模擬的vue響應式系統,您得先看他的文章(至少看他寫的vue的響應式)。

這是我自己的想法,或許適合您,或許也不適合您,還望多多指點。本文沒有**。

在此之前就當您看過《生化危機》。

我是這樣理解vue中的響應式系統原理的: 

new vue(),就像《生化危機》中的世界,vue中的data裡的資料就像每乙個與這個世界有必然接觸的生物(無論你是愛麗絲、喪史、還是喪狗)只要你與這個世界產生了互動,你都會被vue內部的乙個龐大團體『保護傘公司』(對應vue原始碼中的observer)所影響,

它可以觀察一切生物。保護傘公司通過遍布全球的基地「就拿內達華沙漠中的地下實驗室」(對應vue中的definereactive)對區域範圍內的生物進行監控(讓生物變成可觀察的)。

而這一基地具體的操控者又是「艾薩克博士」(對應vue中的object.defineprototy)。 object.defineprototy方法中的3個引數(且說3個),入參是乙個obj(他是生物中的乙個個體,就像愛麗絲),第二個引數key就像愛麗絲的技能點——是用槍、還是用土耳其軍刀,第三個引數vaule是對應技能點的值。 艾薩克博士對每乙個『實驗品』進行改造(他們是喪屍、是愛麗絲的轉殖體、還更有愛麗絲本人,但他們都是data)。

艾薩克博士(object.defineprototy)通過reactivegetter對每乙個data(生物,喪屍...)進行基因讀取(這乙個過程包括vue中的「依賴收集」)。

通過reactivesetter對每乙個data進行寫(就像基因改造,就像《生化3》中改**麗絲的轉殖體)。 reactivegetter時,主要是對data進行依賴收集,這一點很中重要(這關乎著為什麼vue中的資料發生改變,其view層也會改變)。

這個重要是如何維護的呢? 首先,依賴收集會讓「可觀察的」data知道,『有地方依賴我的資料,我變化時要通知他們』。這個時候「紅皇后」登場了,紅皇后她(利用強大ai技術)能監視每乙個生物(data)的資訊,她就像vue中的訂閱者dep。

紅皇后能夠為保護傘公司的那些利益集團高層(就像vue中的watcher)提供一切資訊。

但她首先得知道哪些人是高層(這就像訂閱者dep有乙個功能addsub用來存放watcher觀察者物件)。紅皇后會在得知依賴收集物件發生改變(data資料變化)時通知這幫watcher,物件檢視要更新了...

vue陣列中哪些方法是響應式的

vue陣列中響應式的方法 push 在陣列最後元素中追加元素 pop 刪除陣列最後乙個元素 shift 刪除陣列中第乙個元素 unshift 在陣列前面元素中追加元素 splice 刪除 插入 替換元素 sort 排序 reverse 反轉 注意 通過索引值修改陣列中的元素 雖然data被更改,但是...

vue中的陣列哪些方法是響應式的

我們常用到的運算元組的方法都是響應式的,可以對陣列進行相應的操作 push 尾部插入dom push方法 this.letters.push aaa this.letters.push aaaa bbbb cccc pop 尾部刪除 pop 刪除陣列中的最後乙個元素 this.letters.pop...

Vue中的響應式原理

vue最獨特的特性之一,是其非侵入性的響應式系統。響應式原理 資料變,頁面變 vue實現資料雙向繫結主要是 採用資料劫持結合發布者 訂閱者模式的方式 當把乙個普通的js物件傳入vue例項作為data選項時,vue將遍歷此物件的所有屬性,並使用object.defineproperty把這些屬性全部轉...