當前位置:首頁 » 操作系統 » 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

熱點內容
安卓皇帝隱藏劇情在哪裡 發布:2025-03-17 13:18:53 瀏覽:504
新版安卓為什麼不兼容 發布:2025-03-17 13:18:49 瀏覽:480
s3哪個配置性價比高 發布:2025-03-17 13:06:09 瀏覽:317
氣體壓縮能量 發布:2025-03-17 13:00:16 瀏覽:76
壓縮油19 發布:2025-03-17 12:25:29 瀏覽:856
linux上網代理 發布:2025-03-17 12:23:56 瀏覽:359
c是高級語言嗎 發布:2025-03-17 12:16:31 瀏覽:523
python泛型 發布:2025-03-17 12:15:01 瀏覽:482
編程貓被盜 發布:2025-03-17 12:02:18 瀏覽:131
海關鎖密碼箱如何設置新密碼 發布:2025-03-17 11:53:50 瀏覽:560