data資料與指令都是動态的，
data在觸發get被dep依賴收集，對應的watcher通知視圖更新，
指令的解析的時候建立對應的watcher，并且将依賴插入dep
當set觸發通知dep包含的key改變對應的多個watcher來渲染多處的視圖
dep 與watcher 是一對多的關系，調用幾次就有幾個watcher 但是隻有一個key
vue1.0 data資料調用幾次就有一個watcher
2.0變為一個元件一個wacther
created自上而下，由于mounted自下而上
initlifecycle events render
call hook beforecreate
inject 注入資料在前避免與data重複 state(data/props) provide提供資料
父元件 provide
子元件 inject
created
$set 觸發了對象屬性的改變 與數組索引的變化 來将最新的資料 加入dep 然後 通知視圖 變更渲染
一個元件一個watcher 一個對象一個observe 一個dep
set觸發同一個屬性第一次會入隊dep
然後觸發多次 不會入隊 相同dep收集的key多次觸發 出觸發多次 但是渲染隻在最後一次 使用異步隊列 promise settimeout(不相容使用這個) setimmediate
虛拟節點觸發 是在el的dom的父級body裡面追加節點 而不是在模闆el裡面修改
隻是把el 模闆當作參考而已 會把之前的el删除
diff算法 新老節點比較 頭與尾部做判斷 頭大于尾部下标 對比完成
新老虛拟節點一樣 就深度優先 對比子節點
新舊頭尾部節點有相同 就先優化 不同就正常對比
下圖是判斷是否是什麼節點類型 然後擷取屬性名字 值
是vue指令的核心
比如 v-html 會用節點屬性擷取然後判斷包含v是指令 就調用 html更新方法 來實作虛拟節點轉換真實節點的操作
如下正則用作 判斷模闆裡面的{{}}這個内容 然後通過這個值與data裡面的值對比渲染内容
/\{\{(.*)\}\}/.test("{{xx}}")
true
RegExp.$1
"xx" 都是通過data雙向綁定
watcher監聽
dep收集依賴
get收集 set觸發
complie指令 觸發watcher 來更新元件
