當前位置:首頁 » 操作系統 » 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-16 10:33:27 瀏覽:795
游戲目錄在哪裡安卓 發布:2025-03-16 10:33:19 瀏覽:467
婉兒腳本 發布:2025-03-16 10:19:33 瀏覽:580
c語言ftp下載文件 發布:2025-03-16 10:05:02 瀏覽:307
手機帳戶密碼怎麼找回密碼 發布:2025-03-16 10:02:10 瀏覽:706
c語言位段的使用 發布:2025-03-16 10:00:38 瀏覽:572
象山編程 發布:2025-03-16 09:38:41 瀏覽:927
綠點掌知識薪資密碼是多少 發布:2025-03-16 09:37:05 瀏覽:597
osu安卓版怎麼 發布:2025-03-16 09:37:05 瀏覽:153
python編程編程第三版 發布:2025-03-16 09:29:56 瀏覽:968