摘要:可能會有理解存在偏差的地方,歡迎提指出,共同學習,共同進步。這樣做減少了很多不需要的操作,大大提高了性能。當上已經綁定的時候,代表該對象已經被過了,所以創建一個空節點。
寫在前面
因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結與輸出。
文章的原地址:https://github.com/answershuto/learnVue。
在學習過程中,為Vue加上了中文的注釋https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以對其他想學習Vue源碼的小伙伴有所幫助。
可能會有理解存在偏差的地方,歡迎提issue指出,共同學習,共同進步。
在刀耕火種的年代,我們需要在各個事件方法中直接操作Dom來達到修改視圖的目的。但是當應用一大就會變得難以維護。
那我們是不是可以把真實Dom樹抽象成一棵以javascript對象構成的抽象樹,在修改抽象樹數據后將抽象樹轉化成真實Dom重繪到頁面上呢?于是虛擬Dom出現了,它是真實Dom的一層抽象,用屬性描述真實Dom的各個特性。當它發生變化的時候,就會去修改視圖。
但是這樣的javascript操作Dom進行重繪整個視圖層是相當消耗性能的,我們是不是可以每次只更新它的修改呢?所以Vue.js將Dom抽象成一個以javascript對象為節點的虛擬Dom樹,以VNode節點模擬真實Dom,可以對這顆抽象樹進行創建節點、刪除節點以及修改節點等操作,在這過程中都不需要操作真實Dom,只需要操作javascript對象,大大提升了性能。修改以后經過diff算法得出一些需要修改的最小單位,再將這些小單位的視圖進行更新。這樣做減少了很多不需要的Dom操作,大大提高了性能。
Vue就使用了這樣的抽象節點VNode,它是對真實Dom的一層抽象,而不依賴某個平臺,它可以是瀏覽器平臺,也可以是weex,甚至是node平臺也可以對這樣一棵抽象Dom樹進行創建刪除修改等操作,這也為前后端同構提供了可能。
VNode基類先來看一下Vue.js源碼中對VNode類的定義。
export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component"s scope functionalContext: Component | void; // only for functional component root nodes key: string | number | void; componentOptions: VNodeComponentOptions | void; componentInstance: Component | void; // component instance parent: VNode | void; // component placeholder node raw: boolean; // contains raw HTML? (server only) isStatic: boolean; // hoisted static node isRootInsert: boolean; // necessary for enter transition check isComment: boolean; // empty comment placeholder? isCloned: boolean; // is a cloned node? isOnce: boolean; // is a v-once node? constructor ( tag?: string, data?: VNodeData, children?: ?Array , text?: string, elm?: Node, context?: Component, componentOptions?: VNodeComponentOptions ) { /*當前節點的標簽名*/ this.tag = tag /*當前節點對應的對象,包含了具體的一些數據信息,是一個VNodeData類型,可以參考VNodeData類型中的數據信息*/ this.data = data /*當前節點的子節點,是一個數組*/ this.children = children /*當前節點的文本*/ this.text = text /*當前虛擬節點對應的真實dom節點*/ this.elm = elm /*當前節點的名字空間*/ this.ns = undefined /*編譯作用域*/ this.context = context /*函數化組件作用域*/ this.functionalContext = undefined /*節點的key屬性,被當作節點的標志,用以優化*/ this.key = data && data.key /*組件的option選項*/ this.componentOptions = componentOptions /*當前節點對應的組件的實例*/ this.componentInstance = undefined /*當前節點的父節點*/ this.parent = undefined /*簡而言之就是是否為原生HTML或只是普通文本,innerHTML的時候為true,textContent的時候為false*/ this.raw = false /*靜態節點標志*/ this.isStatic = false /*是否作為跟節點插入*/ this.isRootInsert = true /*是否為注釋節點*/ this.isComment = false /*是否為克隆節點*/ this.isCloned = false /*是否有v-once指令*/ this.isOnce = false } // DEPRECATED: alias for componentInstance for backwards compat. /* istanbul ignore next https://github.com/answershuto/learnVue*/ get child (): Component | void { return this.componentInstance } }
這是一個最基礎的VNode節點,作為其他派生VNode類的基類,里面定義了下面這些數據。
tag: 當前節點的標簽名
data: 當前節點對應的對象,包含了具體的一些數據信息,是一個VNodeData類型,可以參考VNodeData類型中的數據信息
children: 當前節點的子節點,是一個數組
text: 當前節點的文本
elm: 當前虛擬節點對應的真實dom節點
ns: 當前節點的名字空間
context: 當前節點的編譯作用域
functionalContext: 函數化組件作用域
key: 節點的key屬性,被當作節點的標志,用以優化
componentOptions: 組件的option選項
componentInstance: 當前節點對應的組件的實例
parent: 當前節點的父節點
raw: 簡而言之就是是否為原生HTML或只是普通文本,innerHTML的時候為true,textContent的時候為false
isStatic: 是否為靜態節點
isRootInsert: 是否作為跟節點插入
isComment: 是否為注釋節點
isCloned: 是否為克隆節點
isOnce: 是否有v-once指令
打個比方,比如說我現在有這么一個VNode樹
{ tag: "div" data: { class: "test" }, children: [ { tag: "span", data: { class: "demo" } text: "hello,VNode" } ] }
渲染之后的結果就是這樣的
生成一個新的VNode的方法hello,VNode
下面這些方法都是一些常用的構造VNode的方法。
createEmptyVNode 創建一個空VNode節點/*創建一個空VNode節點*/ export const createEmptyVNode = () => { const node = new VNode() node.text = "" node.isComment = true return node }createTextVNode 創建一個文本節點
/*創建一個文本節點*/ export function createTextVNode (val: string | number) { return new VNode(undefined, undefined, undefined, String(val)) }createComponent 創建一個組件節點
// plain options object: turn it into a constructor https://github.com/answershuto/learnVue if (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor) } // if at this stage it"s not a constructor or an async component factory, // reject. /*Github:https://github.com/answershuto*/ /*如果在該階段Ctor依然不是一個構造函數或者是一個異步組件工廠則直接返回*/ if (typeof Ctor !== "function") { if (process.env.NODE_ENV !== "production") { warn(`Invalid Component definition: ${String(Ctor)}`, context) } return } // async component /*處理異步組件*/ if (isUndef(Ctor.cid)) { Ctor = resolveAsyncComponent(Ctor, baseCtor, context) if (Ctor === undefined) { // return nothing if this is indeed an async component // wait for the callback to trigger parent update. /*如果這是一個異步組件則會不會返回任何東西(undifiened),直接return掉,等待回調函數去觸發父組件更新。s*/ return } } // resolve constructor options in case global mixins are applied after // component constructor creation resolveConstructorOptions(Ctor) data = data || {} // transform component v-model data into props & events if (isDef(data.model)) { transformModel(Ctor.options, data) } // extract props const propsData = extractPropsFromVNodeData(data, Ctor, tag) // functional component if (isTrue(Ctor.options.functional)) { return createFunctionalComponent(Ctor, propsData, data, context, children) } // extract listeners, since these needs to be treated as // child component listeners instead of DOM listeners const listeners = data.on // replace with listeners with .native modifier data.on = data.nativeOn if (isTrue(Ctor.options.abstract)) { // abstract components do not keep anything // other than props & listeners data = {} } // merge component management hooks onto the placeholder node mergeHooks(data) // return a placeholder vnode const name = Ctor.options.name || tag const vnode = new VNode( `vue-component-${Ctor.cid}${name ? `-${name}` : ""}`, data, undefined, undefined, undefined, context, { Ctor, propsData, listeners, tag, children } ) return vnode }cloneVNode 克隆一個VNode節點
export function cloneVNode (vnode: VNode): VNode { const cloned = new VNode( vnode.tag, vnode.data, vnode.children, vnode.text, vnode.elm, vnode.context, vnode.componentOptions ) cloned.ns = vnode.ns cloned.isStatic = vnode.isStatic cloned.key = vnode.key cloned.isCloned = true return cloned }createElement
// wrapper function for providing a more flexible interface // without getting yelled at by flow export function createElement ( context: Component, tag: any, data: any, children: any, normalizationType: any, alwaysNormalize: boolean ): VNode { /*兼容不傳data的情況*/ if (Array.isArray(data) || isPrimitive(data)) { normalizationType = children children = data data = undefined } /*如果alwaysNormalize為true,則normalizationType標記為ALWAYS_NORMALIZE*/ if (isTrue(alwaysNormalize)) { normalizationType = ALWAYS_NORMALIZE } /*Github:https://github.com/answershuto*/ /*創建虛擬節點*/ return _createElement(context, tag, data, children, normalizationType) } /*創建虛擬節點*/ export function _createElement ( context: Component, tag?: string | Class| Function | Object, data?: VNodeData, children?: any, normalizationType?: number ): VNode { /* 如果data未定義(undefined或者null)或者是data的__ob__已經定義(代表已經被observed,上面綁定了Oberver對象), https://cn.vuejs.org/v2/guide/render-function.html#約束 那么創建一個空節點 */ if (isDef(data) && isDef((data: any).__ob__)) { process.env.NODE_ENV !== "production" && warn( `Avoid using observed data object as vnode data: ${JSON.stringify(data)} ` + "Always create fresh vnode data objects in each render!", context ) return createEmptyVNode() } /*如果tag不存在也是創建一個空節點*/ if (!tag) { // in case of component :is set to falsy value return createEmptyVNode() } // support single function children as default scoped slot /*默認默認作用域插槽*/ if (Array.isArray(children) && typeof children[0] === "function") { data = data || {} data.scopedSlots = { default: children[0] } children.length = 0 } if (normalizationType === ALWAYS_NORMALIZE) { children = normalizeChildren(children) } else if (normalizationType === SIMPLE_NORMALIZE) { children = simpleNormalizeChildren(children) } let vnode, ns if (typeof tag === "string") { let Ctor /*獲取tag的名字空間*/ ns = config.getTagNamespace(tag) /*判斷是否是保留的標簽*/ if (config.isReservedTag(tag)) { // platform built-in elements /*如果是保留的標簽則創建一個相應節點*/ vnode = new VNode( config.parsePlatformTagName(tag), data, children, undefined, undefined, context ) } else if (isDef(Ctor = resolveAsset(context.$options, "components", tag))) { // component /*從vm實例的option的components中尋找該tag,存在則就是一個組件,創建相應節點,Ctor為組件的構造類*/ vnode = createComponent(Ctor, data, context, children, tag) } else { // unknown or unlisted namespaced elements // check at runtime because it may get assigned a namespace when its // parent normalizes children /*未知的元素,在運行時檢查,因為父組件可能在序列化子組件的時候分配一個名字空間*/ vnode = new VNode( tag, data, children, undefined, undefined, context ) } } else { // direct component options / constructor /*tag不是字符串的時候則是組件的構造類*/ vnode = createComponent(tag, data, context, children) } if (isDef(vnode)) { /*如果有名字空間,則遞歸所有子節點應用該名字空間*/ if (ns) applyNS(vnode, ns) return vnode } else { /*如果vnode沒有成功創建則創建空節點*/ return createEmptyVNode() } }
createElement用來創建一個虛擬節點。當data上已經綁定__ob__的時候,代表該對象已經被Oberver過了,所以創建一個空節點。tag不存在的時候同樣創建一個空節點。當tag不是一個String類型的時候代表tag是一個組件的構造類,直接用new VNode創建。當tag是String類型的時候,如果是保留標簽,則用new VNode創建一個VNode實例,如果在vm的option的components找得到該tag,代表這是一個組件,否則統一用new VNode創建。
關于作者:染陌
Email:answershuto@gmail.com or answershuto@126.com
Github: https://github.com/answershuto
Blog:http://answershuto.github.io/
知乎專欄:https://zhuanlan.zhihu.com/ranmo
掘金: https://juejin.im/user/58f87ae844d9040069ca7507
osChina:https://my.oschina.net/u/3161824/blog
轉載請注明出處,謝謝。
歡迎關注我的公眾號
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88493.html
摘要:根據樹生成所需的內部包含與首先會將模板進行得到一個語法樹,再通過做一些優化,最后通過得到以及。會用正則等方式解析模板中的指令等數據,形成語法樹。是將語法樹轉化成字符串的過程,得到結果是的字符串以及字符串。 寫在前面 這篇文章算是對最近寫的一系列Vue.js源碼的文章(https://github.com/answershuto/learnVue)的總結吧,在閱讀源碼的過程中也確實受益匪...
摘要:如果以上情況均不符合,則通過會得到一個,里面存放了一個為舊的,為對應序列的哈希表。從這個哈希表中可以找到是否有與一致的舊的節點,如果同時滿足,的同時會將這個真實移動到對應的真實的前面。 寫在前面 因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結與輸出。文章的原地址:https://github.com/ans...
摘要:的算法是基于的實現,并在些基礎上作了很多的調整和改進。此時和之間的是新增的,調用,把這些虛擬全部插進的后邊,可以認為新節點先遍歷完。 虛擬dom 為什么出現:瀏覽器解析一個html大致分為五步:創建DOM tree –> 創建Style Rules -> 構建Render tree -> 布局Layout –> 繪制Painting。每次對真實dom進行操作的時候,瀏覽器都會從構建...
摘要:為的組件將不會被緩存。通過這兩種方式分別檢測是否匹配當前組件。修正取出中的不符合條件的,同時不是目前渲染的時,銷毀對應的組件實例實例,并從中移除銷毀對應的組件實例實例遍歷中的所有項,如果不符合指定的規則的話,則會執行。 寫在前面 因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結與輸出。 文章的原地址:http...
摘要:函數通過參數來創建虛擬,結構精簡。其中,訪問的用法,使用場景集中在函數。使用代替模板功能在函數中,不再需要內置的指令,比如。方法時快速改變數組結構,返回一個新數組。 學習筆記:Render函數 Render函數 Vue2與Vue1最大的區別就在于Vue2使用了虛擬DOM來更新DOM節點,提升渲染性能。 Vue2與Vue1最大的區別就在于Vue2使用了虛擬DOM來更新DOM節點,提升...
閱讀 553·2023-04-26 02:59
閱讀 691·2023-04-25 16:02
閱讀 2154·2021-08-05 09:55
閱讀 3544·2019-08-30 15:55
閱讀 4640·2019-08-30 15:44
閱讀 1797·2019-08-30 13:02
閱讀 2193·2019-08-29 16:57
閱讀 2288·2019-08-26 13:35