Vue源碼解析

zgbgx 發(fā)布于2019-08-22 15:05 / 1981人閱讀

摘要：系列文章鏈接主要記錄自己開始學(xué)習(xí)的一些源碼閱讀基于版本介紹了構(gòu)造函數(shù)如何來的，以及其上的屬性方法原型方法靜態(tài)方法的過程發(fā)生了什么對(duì)象如何生成對(duì)象如何掛載到真實(shí)的節(jié)點(diǎn)介紹了的插入，的使用，實(shí)例的生成實(shí)例對(duì)象上的和對(duì)象的創(chuàng)建中的組件和的源碼

系列文章鏈接
主要記錄自己開始學(xué)習(xí)Vue的一些源碼閱讀：基于2.5.8版本

Vue-SourceCode 介紹了

Vue構(gòu)造函數(shù)如何來的，以及其上的屬性/方法/原型方法/靜態(tài)方法

new Vue(options)的過程發(fā)生了什么

vnode對(duì)象如何生成

vnode對(duì)象如何掛載到真實(shí)的DOM節(jié)點(diǎn)

…..

VueRouter-SourceCode介紹了

VueRouter的插入，VueRouter的使用，VueRouter實(shí)例的生成

VueRouter實(shí)例對(duì)象上的matcher和history對(duì)象的創(chuàng)建

VueRouter中的Vue組件RouterLink和RouterView的源碼實(shí)現(xiàn)

Vuex-SourceCode介紹了

Vuex的插入，Vuex的使用，Vuex.Store的實(shí)例生成

Vuex實(shí)例生成：ModuleCollection installModule resetStoreVM等核心創(chuàng)建store實(shí)例的時(shí)候?qū)崿F(xiàn)

Vuex對(duì)象中的輔助函數(shù) mapGetters. mapActions等的源碼實(shí)現(xiàn)

Vuex.Store生成的實(shí)例對(duì)象commit(同步)和dispatch(異步)的源碼實(shí)現(xiàn)與區(qū)別

對(duì)比VueRouter和Vuex

new VueRouter(options). new Vuex.Store(options) 中的options都支持route嵌套和module嵌套

route的嵌套，無論主路由還是子路由，都映射到了matcher對(duì)象上

module的嵌套，無論主模塊還是子模塊，actions getters mutations都映射到了store對(duì)象上，所以后面在任何子組件中都可以通過輔助函數(shù)得到modules中的getters actions mutations等

router-view組件根據(jù)matcher匹配到的組件進(jìn)行渲染對(duì)應(yīng)的組件

輔助函數(shù)可以在各個(gè)組件中獲取到store實(shí)例對(duì)象上的actions. getters. mutations等；

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/93155.html

相關(guān)文章

vue-loader 源碼解析系列之 selector

摘要：當(dāng)前正在處理的節(jié)點(diǎn)，以及該節(jié)點(diǎn)的和等信息。源碼解析之一整體分析源碼解析之三寫作中源碼解析之四寫作中作者博客作者作者微博筆者系 vue-loader 貢獻(xiàn)者之一（#16）前言 vue-loader 源碼解析系列之一，閱讀該文章之前，請(qǐng)大家首先參考大綱 vue-loader 源碼解析系列之整體分析 selector 做了什么 const path = require(path) co...

miqt 2019-08-21 17:58 評(píng)論0 收藏0
Vue源碼解析：AST語法樹轉(zhuǎn)render函數(shù)

摘要：源碼解析這邊解析的是從樹轉(zhuǎn)換成函數(shù)部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個(gè)語法樹轉(zhuǎn)函數(shù)的起點(diǎn)是文件中的函數(shù)明顯看到，函數(shù)傳入?yún)?shù)為語法樹，內(nèi)部調(diào)用函數(shù)開始解析根節(jié)點(diǎn)容器節(jié)點(diǎn)。通過對(duì) Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準(zhǔn)備陸續(xù)寫：模版字符串轉(zhuǎn)AST語法樹 AST語法樹轉(zhuǎn)r...

trilever 2019-08-02 13:58 評(píng)論0 收藏0
Vue源碼解析：AST語法樹轉(zhuǎn)render函數(shù)

摘要：源碼解析這邊解析的是從樹轉(zhuǎn)換成函數(shù)部分的源碼，由于第一次提交的源碼這部分不全，故做了部分更新，代碼全在文件夾中。入口整個(gè)語法樹轉(zhuǎn)函數(shù)的起點(diǎn)是文件中的函數(shù)明顯看到，函數(shù)傳入?yún)?shù)為語法樹，內(nèi)部調(diào)用函數(shù)開始解析根節(jié)點(diǎn)容器節(jié)點(diǎn)。通過對(duì) Vue2.0 源碼閱讀，想寫一寫自己的理解，能力有限故從尤大佬2016.4.11第一次提交開始讀，準(zhǔn)備陸續(xù)寫：模版字符串轉(zhuǎn)AST語法樹 AST語法樹轉(zhuǎn)r...

Karuru 2019-08-23 14:21 評(píng)論0 收藏0
【Vue原理】Compile - 源碼版之 Parse 標(biāo)簽解析

摘要：當(dāng)字符串開頭是時(shí)，可以匹配匹配尾標(biāo)簽。從結(jié)尾，找到所在位置批量閉合。寫文章不容易，點(diǎn)個(gè)贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧【Vue原理】Compile - 源碼版之標(biāo)簽解析...

loostudy 2019-08-26 10:41 評(píng)論0 收藏0
[全網(wǎng)最全的 Vue CLI 3 原創(chuàng)合集] 你要的這里都有

摘要：慢慢地，關(guān)于的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了多篇了會(huì)一直放出來，目前篇，因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用和背后設(shè)計(jì)感興趣的同學(xué)，都是一步一步去看源碼，也給官方提了幾次，合進(jìn)去了幾個(gè)原創(chuàng)不易，歡迎大家互相轉(zhuǎn)發(fā)，期望大家一起快速過度到版本目錄慢慢地，關(guān)于 Vue CLI 3 的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了 20 多篇了（會(huì)一直放出來，目前 23 篇），因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用...

phpmatt 2019-08-23 12:00 評(píng)論0 收藏0