資訊專欄INFORMATION COLUMN
鑒于公司統(tǒng)一框架之后大家對(duì)于vue的使用都已經(jīng)基本上手，在項(xiàng)目運(yùn)用中有很多由研發(fā)部門自定義的組件，那么，自定義組件，elementui組件，甚至于自編寫組件應(yīng)該如何設(shè)計(jì)呢？這就需要大家對(duì)vue的底層有一定了解。
vue頁面是由JavaScript語言+vue標(biāo)簽+css語法共同組成，nodejs編譯的核心語言也是JavaScript，先來了解下該語言的運(yùn)行的兩個(gè)階段：
預(yù)解析（將function定義的函數(shù)/var等定義的變量聲明提前準(zhǔn)備）
從上到下執(zhí)行
js運(yùn)行機(jī)制的特點(diǎn)：
單線程，這點(diǎn)很好理解，前面的事情結(jié)束才執(zhí)行后面的事件
事件循環(huán)EventLoop，包括setTimeout（延時(shí)器）和setInterval（定時(shí)器）、DOM事件、ES6中的Promise、Ajax異步請(qǐng)求。在主線程執(zhí)行的時(shí)候，會(huì)形成一個(gè)執(zhí)行棧以及一個(gè)任務(wù)隊(duì)列，棧中的同步任務(wù)執(zhí)行完成之后會(huì)讀取任務(wù)隊(duì)列，異步任務(wù)就會(huì)進(jìn)入棧開始執(zhí)行，讀取過程會(huì)不斷重復(fù)，如圖：
第一步，newvue() 初始化生命周期等，主要實(shí)現(xiàn)以下三個(gè)內(nèi)容：
1、通過observer 對(duì)data 進(jìn)行監(jiān)聽，并且提供訂閱某個(gè)數(shù)據(jù)項(xiàng)的變化
2、把template 解析成一段document fragment，然后解析其中的directive，得到每一個(gè)directive 所依賴的數(shù)據(jù)項(xiàng)及其更新方法。
3、watcher把directive 中的數(shù)據(jù)依賴訂閱在對(duì)應(yīng)數(shù)據(jù)的observer 上，當(dāng)數(shù)據(jù)變化的時(shí)候，就會(huì)觸發(fā)observer，進(jìn)而觸發(fā)相關(guān)依賴對(duì)應(yīng)的視圖更新方法，以達(dá)到模板關(guān)聯(lián)效果。
第二步，調(diào)用$mount來執(zhí)行掛載函數(shù)。指定一個(gè)掛載節(jié)點(diǎn)，模板編譯、顯示。
第三步，啟動(dòng)編譯器compile生成渲染函數(shù)，并生成虛擬節(jié)點(diǎn)樹，數(shù)據(jù)更新改變的數(shù)據(jù)即是這個(gè)虛擬dom上的數(shù)值，更新之前通過diff算法的比較，將新老值進(jìn)行比較，以實(shí)現(xiàn)最小的dom更新。為減少頁面渲染的次數(shù)和數(shù)量，compile編譯渲染函數(shù)同時(shí)會(huì)進(jìn)行依賴收集，通過這個(gè)這個(gè)步驟監(jiān)視頁面數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)以確認(rèn)需要更新的dom節(jié)點(diǎn)。
第四步，watcher觀察數(shù)據(jù)變化，調(diào)用渲染函數(shù)。
第五步，執(zhí)行patch更新界面。
VUE在初始化數(shù)據(jù)時(shí)，會(huì)給data 中的屬性通過調(diào)用object.defineProperty()來劫持各個(gè)屬性的getter 和setter，在數(shù)據(jù)變化的時(shí)候通知訂閱者，并觸發(fā)相應(yīng)的回調(diào)。
因?yàn)镺bject.defineProperty存在缺點(diǎn)，3.0版本后開始使用Proxy實(shí)現(xiàn)響應(yīng)式，兩者對(duì)比如下：
Object.defineProperty只能劫持對(duì)象的屬性，因此需要遍歷對(duì)象的每個(gè)屬性，而Proxy 可以直接代理對(duì)象
Object.defineProperty 對(duì)新增屬性需要手動(dòng)進(jìn)行觀察，由于Object.defineProperty劫持的是對(duì)象的屬性（第一點(diǎn)），所以新增屬性時(shí)，需要重新遍歷對(duì)象，對(duì)其新增屬性再使用
Object.defineProperty 進(jìn)行劫持（正是這個(gè)原因?qū)е挛覀冊(cè)诮o data中的數(shù)組或?qū)ο笮略鰧傩詴r(shí)，需要使用$set 才能保證視圖可以更新）
Proxy 性能高，支持13種攔截方式
compile 的主要作用是根據(jù)template 模板，生成render函數(shù)。通過核心邏輯獲取dom，遍歷dom，獲取{{}}格式的變量，以及每個(gè)dom的屬性，截獲k-@等開頭設(shè)置響應(yīng)式。
以上是關(guān)于VUE底層結(jié)構(gòu)的淺顯分析，通過JS運(yùn)行機(jī)制特點(diǎn)，介紹VUE源碼構(gòu)建和編譯compile工作原理，希望對(duì)大家后續(xù)vue的使用開發(fā)有所幫助。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/130113.html
摘要：淺析的特點(diǎn)之一就是響應(yīng)式，但數(shù)據(jù)更新時(shí)，并不會(huì)立即更新。盡管已經(jīng)更新，但新增的元素并不立即插入到中。實(shí)際在中，執(zhí)行了，這也是自動(dòng)綁定到執(zhí)行上下文的原因。在內(nèi)，使用數(shù)組保存回調(diào)函數(shù)，表示當(dāng)前狀態(tài)，使用函數(shù)來執(zhí)行回調(diào)隊(duì)列。 Vue.nextTick 淺析 Vue 的特點(diǎn)之一就是響應(yīng)式，但數(shù)據(jù)更新時(shí)，DOM 并不會(huì)立即更新。當(dāng)我們有一個(gè)業(yè)務(wù)場(chǎng)景，需要在 DOM 更新之后再執(zhí)行一段代碼時(shí)，可以...
摘要：前言本文的目的是閱讀理解的源碼，作為集合中重要的一個(gè)角色，平時(shí)用到十分多的一個(gè)類，深入理解它，知其所以然很重要。 前言 本文的目的是閱讀理解HashMap的源碼，作為集合中重要的一個(gè)角色，平時(shí)用到十分多的一個(gè)類，深入理解它，知其所以然很重要。本文基于Jdk1.7，因?yàn)镴dk1.8改變了HashMap的數(shù)據(jù)結(jié)構(gòu)，進(jìn)行了優(yōu)化，我們先從基礎(chǔ)閱讀，之后再閱讀理解Jdk1.8的內(nèi)容 HashMa...
摘要：它由微軟架構(gòu)師和開發(fā)，通過利用微軟圖形系統(tǒng)和的互聯(lián)網(wǎng)應(yīng)用派生品的特性來簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)程序設(shè)計(jì)。微軟的和架構(gòu)師之一于年在他的博客上發(fā)表了。更改時(shí)會(huì)得到提醒這個(gè)情況是一個(gè)單向流。 前言 記得四個(gè)月前有一次面試，面試官問我 MVVM 是什么，MVVM 的本質(zhì)是什么。我大腦一片混亂，那時(shí)我對(duì) MVVM 的認(rèn)知就只是雙向綁定和Vue，以這個(gè)關(guān)鍵字簡(jiǎn)單回答了幾句，我反問 MVVM 的本質(zhì)是...
摘要：它主要做了件事初始化容器，并將元素添加到容器里維護(hù)這樣我們?cè)僬{(diào)用的方法直接就返回了，不需要再次遍歷和統(tǒng)計(jì)的過程。維護(hù)實(shí)時(shí)的維護(hù)，及時(shí)刪除總結(jié)整體上是對(duì)底層的二次封裝，很好的處理了各種細(xì)節(jié)，比如子容器的判空處理，的計(jì)算效率，的維護(hù)等。 在日常開發(fā)中我們通常有需要對(duì) List 容器進(jìn)行分組的情況，比如對(duì)下面的list數(shù)據(jù)根據(jù)name字段來進(jìn)行分組： [ { date...
閱讀 1459·2023-01-11 13:20
閱讀 1814·2023-01-11 13:20
閱讀 1263·2023-01-11 13:20
閱讀 2006·2023-01-11 13:20
閱讀 4226·2023-01-11 13:20
閱讀 2879·2023-01-11 13:20
閱讀 1488·2023-01-11 13:20
閱讀 3807·2023-01-11 13:20
