當前位置:首頁 » 操作系統 » vuejs源碼分析

vuejs源碼分析

發布時間: 2023-07-14 20:20:37

⑴ vuejs源碼用了什麼設計模式,具體點的

最簡單的訂閱者模式

// Observer
class Observer {
constructor (data) {
this.walk(data)
}
walk (data) {
// 遍歷
let keys = Object.keys(data)
for(let i = 0; i < keys.length; i++){
defineReactive(data, keys[i], data[keys[i]])
}
}
}

function defineReactive (data, key, val) {
observer(val)

// dep 為什麼要在這里實例化, 就是為了實現, 對象每一層的 每一個key都有自己的一個訂閱實例, 比如 a.b 對應 dep1, a.c 對應dep2, 這里雖然都是let dep = new Dep()
// 但每次來到這個方法, dep都是獨立的, 會一直保留在內存. 這樣在每次調用set方法都能找到這個a.b對應的dep
// dep 這里會一直保存, 是因為閉包的關系, Object這個全局的函數, 引用了上層的作用域, 這個作用域包含了 dep, 除非Object = null, 或者退出瀏覽器, dep才會消失

//實例化之後, dep就有了被訂閱, 和發布消息的功能, dep不寫在這里也是可以的, 多定義一個全局函數, 每次obser的時候增加一個dep
let dep = new Dep()
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function () {
//每次new Watch('a.b'), 都會先執行get方法, 進而來到這里, 觸發 dep.depend(), 這個dep就是 a.b 對應的 訂閱,
dep.depend()
return val
},
set: function (newVal) {
if(val === newVal){
return

熱點內容
java返回this 發布:2025-10-20 08:28:16 瀏覽:705
製作腳本網站 發布:2025-10-20 08:17:34 瀏覽:968
python中的init方法 發布:2025-10-20 08:17:33 瀏覽:676
圖案密碼什麼意思 發布:2025-10-20 08:16:56 瀏覽:828
怎麼清理微信視頻緩存 發布:2025-10-20 08:12:37 瀏覽:737
c語言編譯器怎麼看執行過程 發布:2025-10-20 08:00:32 瀏覽:1076
郵箱如何填寫發信伺服器 發布:2025-10-20 07:45:27 瀏覽:308
shell腳本入門案例 發布:2025-10-20 07:44:45 瀏覽:188
怎麼上傳照片瀏覽上傳 發布:2025-10-20 07:44:03 瀏覽:875
python股票數據獲取 發布:2025-10-20 07:39:44 瀏覽:829