Vue 原理學習總結

2021-09-29 10:39:52 字數 971 閱讀 5276

vue 如何實現響應式原理

vue 將mvvm做為資料繫結的入口。

幾個vue原始碼關鍵核心概念:

進一步分析

雙向繫結流程:

observer --data update–> dep --notify通知–> watcher --update–> view

-------------------------------dep----

dep 是observer 和 watcher 之間的橋梁, observer 觀察到資料變化則告知 dep, dep會向收集到的watcher 訂閱者們(dep 內會有乙個陣列用來收集依賴的訂閱者),傳送資料改變的通知,收到通知後進行view更新。*

乙個簡單的實現demo例項:

class vue

_update()

}function observer(obj, cb) )

}function definereactive(obj, key, val, cb) `)

return val

},set: newval => `)

val = newval

cb()}})

}var vm = new vue(,

render()

})

vue 如何通過dep 避免渲染無關值更新導致的渲染問題:vue 會在render 函式中,收集本次渲染相關的值,並處理相關值為響應式。 所以,與渲染無關的值,並不會觸發get, 也就不會在依賴收集器中新增到監聽。 所以渲染無關的值,即使呼叫set賦值, notify中的subs也是空的。 因此不會觸發渲染。

注:這裡「依賴收集器」 並非官網定義的名詞。 只是個人理解起名。

總結:

Vue原理學習

1 資料和檢視的分離 解耦,軟體的開放封閉原則 注 開閉原則 軟體實體 模組 類 函式等 應該可以擴充套件,但是不可以修改。也就是說軟體對擴充套件開放,對修改關閉。需要說明的是,對修改關閉不是說軟體設計不能做修改,只是盡量不要做不必要的修改。怎麼才能做到呢?那就是有相應的擴充套件性。其實,軟體有相應...

編譯原理學習總結

總結 首先,很開心能夠與老師完成這一學期的課程,感覺編譯原理這門課吧,有點和資料結構聯絡比較密切,因為好多知識點都是需要運用學的樹,圖來理解完成的,都需要先去理解才能掌握。當然比起資料結構來,編譯原理還是有許多東西需要去記住的。編譯原理不像是一門新的課程,更需要運用許多以前的知識和 知識。其中的lr...

編譯原理學習總結

這學期費老師帶著我們學習了編譯原理,這門課挺重要的,感覺就像是有種連線著整個計算機專業課的感覺。但是也挺難的,對於大神說還好,對我就太難了,理解不了,也不會應用,學的比較糟糕。內容感覺很抽象,不好理解。但經過乙個學期的死纏爛打還是有了點自己的體會和總結的。總的來說。編譯原理就是乙個翻譯 編譯的過程。...