三二vue筆記

  1. 看源碼應(yīng)該有目標(biāo)，抓主要放次要，不然看著看著就亂了。
  2. flow文件開頭通過// @flow或者/* @flow */聲明，語法和ts類似。
  3. vue.js源碼打包工具使用的是Rollup比Webpack輕量；Webpack把所有文件（包括圖片等）當(dāng)作模塊，Rollup只處理js文件更適合在Vue.js這樣的庫中使用；Rollup打包不會(huì)生成冗余代碼，Webpack會(huì)生成一些 瀏覽器端支持的模塊化代碼。開發(fā)庫適合用Rollup，開發(fā)項(xiàng)目適合用Webpack。
  4. 開啟調(diào)試（在dev命令中加上--sourcemap）可以在控制臺(tái)source生成src目錄直接調(diào)試。esModule是靜態(tài)編譯，可以在編譯時(shí)就知道引入關(guān)系從而進(jìn)行tree-shaking。編譯器版本會(huì)幫忙把template語法轉(zhuǎn)換成render函數(shù)，運(yùn)行時(shí)版本只支持render函數(shù)，少了template轉(zhuǎn)換代碼所以更輕量效率更高。vue inspect > output.js將vue-cli封裝的webpack配置輸出到output.js文件里，可以看到導(dǎo)入的vue是運(yùn)行時(shí)esm版本，因?yàn)樾矢摺６鴙ue單文件模板會(huì)轉(zhuǎn)換成js對(duì)象，轉(zhuǎn)換過程會(huì)把template處理成render函數(shù)，所以也不需要編譯器。
  5. 獲取el：如果傳入的是字符串則直接調(diào)用querySelector獲取，否則認(rèn)為是節(jié)點(diǎn)直接返回。el不能掛載到document或者body上。如果傳入的options里沒有傳render，則去將template轉(zhuǎn)換成render函數(shù)。如果有則直接用mount掛載到dom上。
  6. npm run build沒有開啟sourcemap無法調(diào)試。在控制臺(tái)打斷點(diǎn)，通過右側(cè)call stack可以看到方法被誰調(diào)用了?？梢钥吹?mount被new Vue()->Vue->Vue._init依次調(diào)用。
  7. platform處理的是跟平臺(tái)相關(guān)的。主要是處理編譯：定義了平臺(tái)相關(guān)的入口；重寫了$mount()方法；注冊(cè)Vue.compile()方法，即傳遞html字符串返回render函數(shù)。
  8. 在Vue.options上導(dǎo)入平臺(tái)相關(guān)的全局指令（v-model和v-show）和全局組件（v-transition、v-transition-group）。在Vue.prototype上綁定patch函數(shù)（將虛擬dom轉(zhuǎn)換為真實(shí)dom的函數(shù)），再綁定$mount（將實(shí)dom渲染到界面上）。
  9. 給vue掛載全局靜態(tài)方法，比如set、mixin等。

  10. 用構(gòu)造函數(shù)創(chuàng)建了Vue（不用class是因?yàn)榉奖愫竺嬉oVue原型增加內(nèi)容）。然后給Vue混入了常用實(shí)例成員比如$data。


    四個(gè)導(dǎo)出
  11. 關(guān)閉js驗(yàn)證（解決flow檢驗(yàn)報(bào)錯(cuò)問題），用了泛型需要再安裝Babel JavaScript解決部分不高亮問題；但無法快捷跳轉(zhuǎn)。
  12. Vue.options = Object.create(null)可以以null為原型創(chuàng)建對(duì)象提高性能。
  13. initUse為Vue增加use方法用于添加插件，內(nèi)部就是直接調(diào)用傳進(jìn)來的plugin（如果是函數(shù)直接調(diào)用，如果是對(duì)象則調(diào)用它的install方法）。然后將該插件名存起來表示已經(jīng)添加過該插件防止重復(fù)添加。
  14. initMixin為全局options添加mixin的內(nèi)容。

  15. initExtend給Vue增加extend方法，返回構(gòu)造函數(shù)。實(shí)際上也是繼承Vue的。


    impicture_20210901_204010.png

  16. beforeCreate后去處理inject/provide/state，initState是去處理props/methods/data/computed/watch都注入到實(shí)例上。


    impicture_20210901_204724.png
  17. 入口文件可以從npm run dev的執(zhí)行語句rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev里面找。找到scripts/config.js里web-full-dev的配置。結(jié)合resolve方法找到別名，入口文件為src/platforms/web/entry-runtime-with-compiler.js。npm install http-server -g，通過http-server . -p 8000在vue源碼文件夾啟動(dòng)本地服務(wù)器?？刂婆_(tái)入口文件el = el && query(el)打斷點(diǎn)，F(xiàn)5刷新運(yùn)行調(diào)試，F(xiàn)11執(zhí)行下一個(gè)步驟。
  18. 首次渲染：先找當(dāng)前是否有節(jié)點(diǎn)，可以是字符串或者template或者節(jié)點(diǎn)。找到后獲取節(jié)點(diǎn)的innerHTML，將其轉(zhuǎn)換成render函數(shù)。
  19. 判斷value是否非對(duì)象或非vnode，否則直接返回。否則判斷value是否有ob，有則直接返回（相當(dāng)于緩存），沒有再observe處理。
    observe實(shí)際上就是調(diào)用def處理value。def其實(shí)就是設(shè)置ob把所有屬性用defineProperty弄一遍。如果是array則特殊處理，否則用walk設(shè)置getset并且收集依賴之類的。
  20. 在watcher對(duì)象的get方法中聲明dep綁定target去dep.depend收集依賴。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容