摘要:為的組件將不會被緩存。通過這兩種方式分別檢測是否匹配當前組件。修正取出中的不符合條件的,同時不是目前渲染的時,銷毀對應的組件實例實例,并從中移除銷毀對應的組件實例實例遍歷中的所有項,如果不符合指定的規則的話,則會執行。
寫在前面
因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結與輸出。
文章的原地址:https://github.com/answershuto/learnVue。
在學習過程中,為Vue加上了中文的注釋https://github.com/answershuto/learnVue/tree/master/vue-src以及Vuex的注釋https://github.com/answershuto/learnVue/tree/master/vuex-src,希望可以對其他想學習源碼的小伙伴有所幫助。
可能會有理解存在偏差的地方,歡迎提issue指出,共同學習,共同進步。
keep-alivekeep-alive是Vue.js的一個內置組件。它能夠不活動的組件實例保存在內存中,而不是直接將其銷毀,它是一個抽象組件,不會被渲染到真實DOM中,也不會出現在父組件鏈中。
它提供了include與exclude兩個屬性,允許組件有條件地進行緩存。
具體內容可以參考官網。
使用 用法這里的component組件會被緩存起來。
舉個栗子export default { data () { return { test: true } }, methods: { handleClick () { this.test = !this.test; } } }
在點擊button時候,coma與comb兩個組件會發生切換,但是這時候這兩個組件的狀態會被緩存起來,比如說coma與comb組件中都有一個input標簽,那么input標簽中的內容不會因為組件的切換而消失。
propskeep-alive組件提供了include與exclude兩個屬性來允許組件有條件地進行緩存,二者都可以用逗號分隔字符串、正則表達式或一個數組來表示。
將緩存name為a的組件。
name為a的組件將不會被緩存。
生命鉤子keep-alive提供了兩個生命鉤子,分別是activated與deactivated。
因為keep-alive會將組件保存在內存中,并不會銷毀以及重新創建,所以不會重新調用組件的created等方法,需要用activated與deactivated這兩個生命鉤子來得知當前組件是否處于活動狀態。
深入keep-alive組件實現說完了keep-alive組件的使用,我們從源碼角度看一下keep-alive組件究竟是如何實現組件的緩存的呢?
created與destroyed鉤子created鉤子會創建一個cache對象,用來作為緩存容器,保存vnode節點。
created () { /* 緩存對象 */ this.cache = Object.create(null) },
destroyed鉤子則在組件被銷毀的時候清除cache緩存中的所有組件實例。
/* destroyed鉤子中銷毀所有cache中的組件實例 */ destroyed () { for (const key in this.cache) { pruneCacheEntry(this.cache[key]) } },render
接下來是render函數。
render () { /* 得到slot插槽中的第一個組件 */ const vnode: VNode = getFirstComponentChild(this.$slots.default) const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions if (componentOptions) { // check pattern /* 獲取組件名稱,優先獲取組件的name字段,否則是組件的tag */ const name: ?string = getComponentName(componentOptions) /* name不在inlcude中或者在exlude中則直接返回vnode(沒有取緩存) */ if (name && ( (this.include && !matches(this.include, name)) || (this.exclude && matches(this.exclude, name)) )) { return vnode } const key: ?string = vnode.key == null // same constructor may get registered as different local components // so cid alone is not enough (#3269) ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : "") : vnode.key /* 如果已經做過緩存了則直接從緩存中獲取組件實例給vnode,還未緩存過則進行緩存 */ if (this.cache[key]) { vnode.componentInstance = this.cache[key].componentInstance } else { this.cache[key] = vnode } /* keepAlive標記位 */ vnode.data.keepAlive = true } return vnode }
首先通過getFirstComponentChild獲取第一個子組件,獲取該組件的name(存在組件名則直接使用組件名,否則會使用tag)。接下來會將這個name通過include與exclude屬性進行匹配,匹配不成功(說明不需要進行緩存)則不進行任何操作直接返回vnode,vnode是一個VNode類型的對象,不了解VNode的同學可以參考筆者的另一篇文章《VNode節點》 .
/* 檢測name是否匹配 */ function matches (pattern: string | RegExp, name: string): boolean { if (typeof pattern === "string") { /* 字符串情況,如a,b,c */ return pattern.split(",").indexOf(name) > -1 } else if (isRegExp(pattern)) { /* 正則 */ return pattern.test(name) } /* istanbul ignore next */ return false }
檢測include與exclude屬性匹配的函數很簡單,include與exclude屬性支持字符串如"a,b,c"這樣組件名以逗號隔開的情況以及正則表達式。matches通過這兩種方式分別檢測是否匹配當前組件。
if (this.cache[key]) { vnode.componentInstance = this.cache[key].componentInstance } else { this.cache[key] = vnode }
接下來的事情很簡單,根據key在this.cache中查找,如果存在則說明之前已經緩存過了,直接將緩存的vnode的componentInstance(組件實例)覆蓋到目前的vnode上面。否則將vnode存儲在cache中。
最后返回vnode(有緩存時該vnode的componentInstance已經被替換成緩存中的了)。
watch用watch來監聽pruneCache與pruneCache這兩個屬性的改變,在改變的時候修改cache緩存中的緩存數據。
watch: { /* 監視include以及exclude,在被修改的時候對cache進行修正 */ include (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => matches(val, name)) }, exclude (val: string | RegExp) { pruneCache(this.cache, this._vnode, name => !matches(val, name)) } },
來看一下pruneCache的實現。
/* 修正cache */ function pruneCache (cache: VNodeCache, current: VNode, filter: Function) { for (const key in cache) { /* 取出cache中的vnode */ const cachedNode: ?VNode = cache[key] if (cachedNode) { const name: ?string = getComponentName(cachedNode.componentOptions) /* name不符合filter條件的,同時不是目前渲染的vnode時,銷毀vnode對應的組件實例(Vue實例),并從cache中移除 */ if (name && !filter(name)) { if (cachedNode !== current) { pruneCacheEntry(cachedNode) } cache[key] = null } } } } /* 銷毀vnode對應的組件實例(Vue實例) */ function pruneCacheEntry (vnode: ?VNode) { if (vnode) { vnode.componentInstance.$destroy() } }
遍歷cache中的所有項,如果不符合filter指定的規則的話,則會執行pruneCacheEntry。pruneCacheEntry則會調用組件實例的$destroy方法來將組件銷毀。
最后Vue.js內部將DOM節點抽象成了一個個的VNode節點,keep-alive組件的緩存也是基于VNode節點的而不是直接存儲DOM結構。它將滿足條件(pruneCache與pruneCache)的組件在cache對象中緩存起來,在需要重新渲染的時候再將vnode節點從cache對象中取出并渲染。
關于作者:染陌
Email:answershuto@gmail.com or answershuto@126.com
Github: https://github.com/answershuto
知乎:https://www.zhihu.com/people/cao-yang-49/activities
轉載請注明出處,謝謝。
歡迎關注我的公眾號
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89743.html
摘要:我們留意到,這里不是簡單地將置為,而是遍歷調用函數刪除。執行組件的鉤子函數刪除緩存還要對應執行組件實例的鉤子函數。這個在不可忽視鉤子函數章節會再次出場。參考技術揭秘源碼一、前言 原文鏈接:github.com/qi... 本文介紹的內容包括: keep-alive用法:動態組件&vue-router keep-alive源碼解析 keep-alive組件及其包裹組件的鉤子 keep-a...
摘要:握手客戶端向服務端發起連接請求如圖,我們在請求服務器的時候,發送了這樣的。如圖下面解釋下字段的含義協議升級成功服務端處理之后的協議版本號協議升級為至此,握手成功下面就盡情的傳輸數據吧數據傳輸數據傳輸需要客戶端,沒什么好說的了。 一、閱前熱身 什么是keep-alive 1、keep-alive只是客戶端的一種建議 我們打開百度首頁,進一步查看header。 showImg(https:...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...
閱讀 2312·2021-11-15 11:38
閱讀 2440·2021-11-15 11:37
閱讀 2543·2021-08-24 10:00
閱讀 2901·2019-08-30 15:56
閱讀 1260·2019-08-30 15:53
閱讀 3695·2019-08-29 18:43
閱讀 2931·2019-08-29 17:01
閱讀 3255·2019-08-29 16:25