3-2

vue的不同構(gòu)建版本

npm run build

• 完整版：同時(shí)辦函編譯器和運(yùn)行時(shí)版本
• 編譯器：用來將模板字符串便已成為JavaScript渲染函數(shù)的代碼戏羽，體積大担神，效率低
• 運(yùn)行時(shí)：用來創(chuàng)建vue實(shí)例、渲染并處理虛擬DOM等的代碼始花，體積小妄讯，效率高，基本上就是出去編譯器的代碼
• UMD：UMD版本通用的模塊版本酷宵，支持多種模塊方式亥贸，vue.js默認(rèn)文件就是運(yùn)行時(shí)+編譯器的UMD版本
• CommonJS(cjs)：CommonJS版本用來配合老的打包工具比如Browserify或webpack1
• ESModule：從2.6開始Vue會(huì)提供兩個(gè)ESModules(ESM)構(gòu)建穩(wěn)健，為現(xiàn)代打包工具提供的版本
  • ESM格式被設(shè)計(jì)為可以被靜態(tài)分析浇垦，所以打包工具可以利用這一點(diǎn)來進(jìn)行tree-shaking并將用不到的代碼排除出最終包

使用vue-cli創(chuàng)建的項(xiàng)目默認(rèn)導(dǎo)入的是運(yùn)行時(shí)版本并且是ESM模塊化方式

閱讀源碼

• el不能是body或者h(yuǎn)tml標(biāo)簽
• 如果沒有render炕置，把template轉(zhuǎn)換成render函數(shù)
• 如果有render方法，直接調(diào)用mount掛載DOM

VUE

四個(gè)導(dǎo)出Vue的模塊

• src/platforms/web/entry-runtime-with-compiler.js
  • web平臺(tái)相關(guān)入口
  • 重寫了平臺(tái)相關(guān)的$mount()方法
  • 注冊(cè)了Vue.compile()方法男韧，傳遞一個(gè)HTMl字符串返回render函數(shù)
• src/platforms/web/runtime/index.js
  • web平臺(tái)相關(guān)
  • 注冊(cè)和平臺(tái)相關(guān)的全局指令：v-model朴摊、v-show
  • 注冊(cè)和平臺(tái)相關(guān)的全局組件：v-transition、v-transition-group
  • 全局方法：
    • patch：把虛擬DOM轉(zhuǎn)換成真實(shí)DOM
    • $mount：掛載方法
• src/core/index.js
  • 與平臺(tái)無關(guān)
  • 設(shè)置了Vue的靜態(tài)方法此虑，initGlobalAPI(Vue)
• src/core/instance/index.js
  • 與平臺(tái)無關(guān)
  • 定義了構(gòu)造函數(shù)甚纲，調(diào)用了this_init(options)方法
  • 給Vue混入了常用的實(shí)例成員

數(shù)據(jù)響應(yīng)式原理

核心： 把會(huì)改變數(shù)組的方法進(jìn)行修補(bǔ)，當(dāng)這些方法被調(diào)用的時(shí)候調(diào)用notify方法朦前，遍歷數(shù)組中的元素贩疙，把對(duì)象元素進(jìn)行響應(yīng)式處理

Watcher類

Watcher分為三類讹弯，Computed Watcher， 用戶Watcher(監(jiān)聽器)这溅，渲染W(wǎng)atcher

• 渲染W(wǎng)atcher的創(chuàng)建時(shí)機(jī)
  • /src/core/instance/lifeycle.js

vm.$delete

• 功能
  刪除對(duì)象的屬性组民，如果對(duì)象是響應(yīng)式，確保刪除能c觸發(fā)更新視圖悲靴，這個(gè)方式主要用于避開Vue不能檢測(cè)到屬性被刪除的限制臭胜，，目標(biāo)對(duì)象不能是一個(gè)Vue實(shí)例或Vue實(shí)例的根數(shù)據(jù)對(duì)象

vm.$watch(expOrFn, callback, [options])

• 功能
  觀察Vue實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)癞尚，回調(diào)函數(shù)得到的參數(shù)為新值和舊值耸三，表達(dá)式只接受監(jiān)督的鍵路徑，對(duì)于更復(fù)雜的表達(dá)式浇揩，用一個(gè)函數(shù)取代
• 參數(shù)
  • expOrFn: 要監(jiān)視的$data中的屬性仪壮，可以是表達(dá)式或函數(shù)
  • callback: 數(shù)據(jù)變化后執(zhí)行的函數(shù)
    • 函數(shù): 回調(diào)函數(shù)
    • 對(duì)象: 具有handle屬性(字符串或函數(shù))，如果該屬性為字符串則methods中相應(yīng)的定義
  • options:
    • deep: 布爾類型胳徽，深度監(jiān)聽
    • immediate: 布爾類型积锅，是否立即執(zhí)行一次回調(diào)函數(shù)

三種類型的Watcher對(duì)象

• 沒有靜態(tài)方法，因?yàn)?watch方法中要使用vue實(shí)例
• Watcher分為三種：計(jì)算屬性Watcher养盗，用戶Watcher(偵聽器)缚陷，渲染W(wǎng)atcher
  • 創(chuàng)建順序：計(jì)算屬性Watcher，用戶Watcher往核，渲染W(wǎng)atcher
• vm.$watcher

nextTick()

• Vue更新DOM是異步執(zhí)行的箫爷，是批量的
  • 在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后立即使用這個(gè)方法聂儒，獲取更新后的DOM
  • vm.$nextTick()

虛擬DOM

• 虛擬DOM(VirtualDOM)是使用JavaScript對(duì)象來描述真實(shí)DOM
• Vue中的虛擬DOM借鑒了Snabbdom虎锚，并添加了Vue的特性，例如指令和組件機(jī)制
• 使用虛擬DOM可以避免直接操作DOM衩婚，提高開發(fā)效率
• 虛擬DOM作為一個(gè)中間層可以跨平臺(tái)
• 虛擬DOM不一定能提高性能
  • 首次渲染會(huì)增加開銷
  • 復(fù)雜視圖情況下提高渲染性能

h函數(shù)

• vm.$createElement(tag, data, children, normalizeChildren)
  • tag：標(biāo)簽名稱或組件對(duì)象
  • data：描述tag窜护，可以設(shè)置dom的屬性或標(biāo)簽的屬性
  • children：tag中的文本節(jié)點(diǎn)或子節(jié)點(diǎn)
• h函數(shù)返回的是一個(gè)VNode對(duì)象，也就是虛擬DOM
• VNode核心屬性
  • tag 調(diào)用h函數(shù)傳入的tag
  • data 調(diào)用h函數(shù)傳入的data
  • children 調(diào)用h函數(shù)傳入的children
  • elm VNode轉(zhuǎn)換為真實(shí)DOM會(huì)記錄到elm的屬性中
  • key 復(fù)用當(dāng)前元素

模板編譯

模板編譯的主要目的是將模板轉(zhuǎn)換為渲染函數(shù)

• Vue 2.x使用VNode描述視圖以及各種交互谅猾，用戶自己編寫VNode比較復(fù)雜
• 用戶只需要編寫類似HTML的代碼-Vue.js模板柄慰，通過編譯器將模板轉(zhuǎn)換為返回VNode的render函數(shù)
• .vue文件會(huì)被webpack在構(gòu)建過程中轉(zhuǎn)換成render函數(shù)

抽象語(yǔ)法樹

• 抽象語(yǔ)法樹建成AST（Abstract Syntax Tree）
• 使用對(duì)象的形式描述樹形的代碼結(jié)構(gòu)
• 此處的抽象語(yǔ)法是用來描述樹形結(jié)構(gòu)的HTML字符串
• 模板字符串轉(zhuǎn)換為AST后鳍悠，可以通過AST對(duì)模板做優(yōu)化處理
• 標(biāo)記模板中的靜態(tài)內(nèi)容税娜，在patch的時(shí)候直接跳過靜態(tài)內(nèi)容
• 在patch的過程中靜態(tài)內(nèi)容不需要對(duì)比和重新渲染

Vue組件

• 一個(gè)Vue組件就是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè)Vue實(shí)例
• 一個(gè)組件可以組成頁(yè)面上一個(gè)功能完備的區(qū)域，組件可以包含腳本藏研、樣式敬矩、模板