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