最近一段時間一直在研究 vue 的原始碼,突然間想寫乙個乞丐的 vue 實現,為了理一下自己的思路,同時也作為乙個階段性的總結.
vue 雙向繫結看這裡
vue2.0/1.0 雙向資料繫結簡單來說就是利用了 object.defineproperty()和觀察者模式對 data 資料進行資料劫持.
廢話不多說,直接上**
//watcher,觀察者,真正執行更新操作的角色
class watcher
//用來執行我們的更新函式
update()
}
//dep負責維護乙個更新佇列,
class dep
//新增更新佇列(這是乙個乞丐版的)
adddep(watcher)
//通知佇列更新
notify()
}
class vue
this.$data = options.data||{}
//執行響應化處理
this.$data&&this.observe(this.$data)
//執行編譯
new compile(options.el, this)
}observe(obj))
}//資料劫持
definereactive(obj,key,val),
set(newval)}})
} //**資料
proxydata(key),
set(newval)})}
}
現在看一下**的實現
class compile
//編譯
compile(el)else if(this.istext(node))
//如果子元素下面還有子元素,遞迴處理
if(node.childnodes&&node.childnodes.length>0)})}
//編譯元素節點
compileelement(node)else if(name.indexof('@')>-1)})}
//編譯文字節點
compiletext(node)
text(node,key)
//雙向資料繫結
model(node,key))
}html(node,key)
//update函式
update(node,key,dir))
}//更新text文字
textupdater(node,val)
//更新v-html
htmlupdater(node,val)
//model更新函式
modelupdater(node,val)
//判斷是否為元素節點
iselement(node)
//判斷是否為文字節點
istext(node)}
const res = node.nodetype===3&&/\\}/.test(node.textcontent)
return res}}
雖然是乞丐版的實現,但是感覺思路是相通的:通過 object.defineproperty 實現資料劫持,通過 compile 模組實現 dom 的更新.
原始碼在這裡
react原始碼解析14 手寫hooks
1.開篇介紹和面試題 2.react的設計理念 3.react原始碼架構 4.原始碼目錄結構和除錯 5.jsx 核心api 6.legacy和concurrent模式入口函式 7.fiber架構 8.render階段 9.diff演算法 10.commit階段 11.生命週期 12.狀態更新流程 1...
手撕VUE原始碼 一 手寫乙個MVVM
class vue class observer observer data reactive key,value,data set newvalue class compiler compilertodata fregment else compilerelementnode node attr ...
原始碼 自己寫的Msg
返回提示資訊類 public class msg if sql.indexof where 1 if sql.indexof group by 1 if sql.indexof order by 1 return sql public msg public static void confirm s...