資訊專欄INFORMATION COLUMN
摘要：對(duì)象是一個(gè)對(duì)象，用來(lái)表示相應(yīng)的結(jié)構(gòu)代碼位置定義類型定義類型選擇器數(shù)據(jù)，主要包括屬性樣式數(shù)據(jù)綁定時(shí)間等子節(jié)點(diǎn)關(guān)聯(lián)的原生節(jié)點(diǎn)文本唯一值，為了優(yōu)化性能定義的類型定義綁定的數(shù)據(jù)類型屬性能直接用訪問(wèn)的屬性樣式類樣式數(shù)據(jù)綁定的事件鉤子創(chuàng)建對(duì)象根據(jù)傳入的
vnode 對(duì)象
vnode 是一個(gè)對(duì)象，用來(lái)表示相應(yīng)的 dom 結(jié)構(gòu)
代碼位置 ：./src/vnode.ts
定義 vnode 類型/**
* 定義VNode類型
*/
export interface VNode {
// 選擇器
sel: string | undefined;
// 數(shù)據(jù)，主要包括屬性、樣式、數(shù)據(jù)、綁定時(shí)間等
data: VNodeData | undefined;
// 子節(jié)點(diǎn)
children: Array | undefined;
// 關(guān)聯(lián)的原生節(jié)點(diǎn)
elm: Node | undefined;
// 文本
text: string | undefined;
// key , 唯一值，為了優(yōu)化性能
key: Key | undefined;
}
定義 VNodeData 的類型
/**
* 定義VNode 綁定的數(shù)據(jù)類型
*/
export interface VNodeData {
// 屬性 能直接用 . 訪問(wèn)的
props?: Props;
// 屬性
attrs?: Attrs;
// 樣式類
class?: Classes;
// 樣式
style?: VNodeStyle;
// 數(shù)據(jù)
dataset?: Dataset;
// 綁定的事件
on?: On;
hero?: Hero;
attachData?: AttachData;
// 鉤子
hook?: Hooks;
key?: Key;
ns?: string; // for SVGs
fn?: () => VNode; // for thunks
args?: Array; // for thunks
[key: string]: any; // for any other 3rd party module
}
創(chuàng)建 VNode 對(duì)象
// 根據(jù)傳入的 屬性 ，返回一個(gè) vnode 對(duì)象
export function vnode(
sel: string | undefined,
data: any | undefined,
children: Array | undefined,
text: string | undefined,
elm: Element | Text | undefined
): VNode {
let key = data === undefined ? undefined : data.key;
return {
sel: sel,
data: data,
children: children,
text: text,
elm: elm,
key: key
};
}
export default vnode;
snabbdom源碼解析系列
snabbdom源碼解析（一） 準(zhǔn)備工作
snabbdom源碼解析（二） h函數(shù)
snabbdom源碼解析（三） vnode對(duì)象
snabbdom源碼解析（四） patch 方法
snabbdom源碼解析（五） 鉤子
snabbdom源碼解析（六） 模塊
snabbdom源碼解析（七） 事件處理
個(gè)人博客地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108830.html
介紹 這里是 typescript 的語(yǔ)法，定義了一系列的重載方法。h 函數(shù)主要根據(jù)傳進(jìn)來(lái)的參數(shù)，返回一個(gè) vnode 對(duì)象 代碼 代碼位置 ： ./src/h.ts /** * 根據(jù)選擇器 ，數(shù)據(jù) ，創(chuàng)建 vnode */ export function h(sel: string): VNode; export function h(sel: string, data: VNodeData...
摘要：閱讀源碼的時(shí)候，想了解虛擬結(jié)構(gòu)的實(shí)現(xiàn)，發(fā)現(xiàn)在的地方。然而慢慢的人們發(fā)現(xiàn)，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 前言 虛擬 DOM 結(jié)構(gòu)概念隨著 react 的誕生而火起來(lái)，之后 vue2.0 也加入了虛擬 DOM 的概念。 閱讀 vue 源碼的時(shí)候，想了解...
摘要：這種解決方式也是相當(dāng)優(yōu)雅，值得學(xué)習(xí)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 事件處理 我們?cè)谑褂?vue 的時(shí)候，相信你一定也會(huì)對(duì)事件的處理比較感興趣。 我們通過(guò) @click 的時(shí)候，到底是發(fā)生了什么呢！ 雖然我們用 @click綁定在模板上，不過(guò)事件嚴(yán)格綁定在 vnode 上的 。 event...
摘要：模塊在里面，定義了一系列的模塊，這些模塊定義了相應(yīng)的鉤子。主要接受兩個(gè)參數(shù)，。傳送門(mén)事件模塊待續(xù)。。。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 模塊 在 ./src/modules 里面，定義了一系列的模塊 ， 這些模塊定義了相應(yīng)的鉤子 。這些鉤子會(huì)在 patch 的不同階段觸發(fā)，以完成相應(yīng)模塊的...
摘要：就近復(fù)用為了盡可能不發(fā)生的移動(dòng)，會(huì)就近復(fù)用相同的節(jié)點(diǎn)，復(fù)用的依據(jù)是判斷是否是同類型的元素方法在中，主要是方法。例如元素的之類的詳細(xì)了解請(qǐng)查看模塊模塊判斷是否是相同的虛擬節(jié)點(diǎn)判斷是否是相同的虛擬節(jié)點(diǎn)方法最后返回一個(gè)方法。 patch 方法 前言 在開(kāi)始解析這塊源碼的時(shí)候，先給大家補(bǔ)一個(gè)知識(shí)點(diǎn)。關(guān)于 兩顆 Virtual Dom 樹(shù)對(duì)比的策略 diff 策略 同級(jí)對(duì)比showImg(ht...
閱讀 2018·2021-11-24 09:39
閱讀 1006·2021-11-11 16:55
閱讀 1473·2021-10-09 09:43
閱讀 1452·2021-10-08 10:17
閱讀 1688·2021-08-25 09:41
閱讀 458·2019-08-30 13:02
閱讀 657·2019-08-29 15:14
閱讀 1035·2019-08-29 13:53
