Vue 原理理解 - 文章摘要學習

部分摘要 - 360圖書館 號令風云
一圖勝前言
根據(jù)自己的理解對原圖進行了標注

Vue流程
vue流程

Vue運行流程:

  • 模板通過編譯生成AST
  • AST生成Vue的render函數(shù)(渲染函數(shù))
  • 渲染函數(shù)結合數(shù)據(jù)生成Virtual DOM樹
  • Diff和Patch后生成新的UI

vue初始化階段
1.Vue支持我們通過data參數(shù)傳遞一個JavaScript對象做為組件數(shù)據(jù)慕匠,
2.Vue將遍歷此對象屬性影晓,使用Object.defineProperty方法設置描述對象枪孩,
3.通過存取器函數(shù)可以追蹤該屬性的變更,
4.Vue創(chuàng)建了一層Watcher層傀缩,在組件渲染的過程中把屬性記錄為依賴,

數(shù)據(jù)更新階段
1.當依賴項的setter被調用時惫周,
2.通知Watcher重新計算餐茵,
3.從而使它關聯(lián)的組件通過render去渲染虛擬dom樹
4.通過diff的核心算法patch,將新舊虛擬dom樹,比對出差異部分辆苔,渲染到頁面中去

針對編譯器模板的差異

模板編譯的當時算灸,在Vue中,可以2種驻啤,Vue流程
1.獨立構建:
包含模板編譯器菲驴,渲染過程HTML字符串 → render函數(shù) → VNode → 真實DOM節(jié)點
2.運行時構建:(只是省去了圖1中,左側的編譯期)
不包含模板編譯器街佑,渲染過程render函數(shù) → VNode → 真實DOM節(jié)點

模板書寫方式
1.自定義render方式 【上面編譯方式2】

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (
            'h' + this.level,   // tag name標簽名稱
            this.$slots.default // 子組件中的陣列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

2.template方式【上面編譯方式1】

let app = new Vue({
    template: `<div>{{ msg }}</div>`,
    data () {
        return {
            msg: ''
        }
    }
})

3.el方式【上面編譯方式1】

let app = new Vue({
    el: '#app',
    data () {
        return {
            msg: 'Hello Vue!'
        }
    }
})

不論哪一種方式谢翎,最終都要得到render函數(shù)

渲染過程

render渲染簡化流程


Vue渲染機制
組件響應式渲染
原理再圖解

new Vue,執(zhí)行初始化
掛載$mount方法沐旨,通過自定義render方法森逮、template、el等生成render函數(shù)
通過Watcher監(jiān)聽數(shù)據(jù)的變化
當數(shù)據(jù)發(fā)生變化時磁携,render函數(shù)執(zhí)行生成VNode對象
通過patch方法褒侧,對比新舊VNode對象,通過DOM Diff算法谊迄,添加闷供、修改、刪除真正的DOM元素

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末统诺,一起剝皮案震驚了整個濱河市歪脏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粮呢,老刑警劉巖婿失,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異啄寡,居然都是意外死亡豪硅,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門挺物,熙熙樓的掌柜王于貴愁眉苦臉地迎上來懒浮,“玉大人,你說我怎么就攤上這事识藤⊙庵” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵痴昧,是天一觀的道長赖草。 經(jīng)常有香客問我,道長剪个,這世上最難降的妖魔是什么秧骑? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮扣囊,結果婚禮上乎折,老公的妹妹穿的比我還像新娘。我一直安慰自己侵歇,他們只是感情好骂澄,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惕虑,像睡著了一般坟冲。 火紅的嫁衣襯著肌膚如雪磨镶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天健提,我揣著相機與錄音琳猫,去河邊找鬼。 笑死私痹,一個胖子當著我的面吹牛脐嫂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播紊遵,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼账千,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了暗膜?” 一聲冷哼從身側響起匀奏,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎学搜,沒想到半個月后攒射,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡恒水,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年会放,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钉凌。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡咧最,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出御雕,到底是詐尸還是另有隱情矢沿,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布酸纲,位于F島的核電站捣鲸,受9級特大地震影響,放射性物質發(fā)生泄漏闽坡。R本人自食惡果不足惜栽惶,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疾嗅。 院中可真熱鬧外厂,春花似錦、人聲如沸代承。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽论悴。三九已至掖棉,卻和暖如春墓律,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背幔亥。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工耻讽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人紫谷。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓齐饮,卻偏偏與公主長得像捐寥,于是被迫代替她去往敵國和親笤昨。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349