VUE 原始碼導讀

2021-09-27 13:01:23 字數 3783 閱讀 2144

斷斷續續耗費了近乙個月的時間,將vue-2.6版本的原始碼大致看了下。自己的理解,主要分兩個部分,工具方法準備和vue物件。

工具準備:

var strats =

;var

lifecycle_hooks=[

'beforecreate'

,'created'

,'beforemount'

,'mounted'

,'beforeupdate'

,'updated'

,'beforedestroy'

,'destroyed'

,'activated'

,'deactivated'

,'errorcaptured'

,'serverprefetch'];

lifecycle_hooks

.foreach

(function

(hook));

// 初始化鉤子函式

varasset_types=[

'component'

,'directive'

,'filter'];

asset_types

.foreach

(function

(type));

// 初始化資產函式

strats.watch

strats.props

strats.methods

strats.inject

strats.computed

strats.provide

vue類:

vue

initmixin

(vue)

; vue.prototype._init

initlifecycle

(vm)

;// 生命週期的初始化狀態設定

vm.$parent = parent;

vm.$root = parent ? parent.$root : vm;

vm.$children =

; vm.$refs =

; vm._watcher =

null

; vm._inactive =

null

; vm._directinactive =

false

; vm._ismounted =

false

; vm._isdestroyed =

false

; vm._isbeingdestroyed =

false

;initevents

(vm)

;updatecomponentlisteners

(vm, listeners)

;// 更新父元件的事件

initrender

(vm)

;definereactive$$1

(vm,

'$attrs'

, parentdata && parentdata.attrs || emptyobject,

null

,true);

// 定義響應式屬性

definereactive$$1

(vm,

'$listeners'

, options._parentlisteners || emptyobject,

null

,true);

// 定義響應式監聽

callhook

(vm,

'beforecreate');

vm.$emit

('hook:'

+ hook)

;// 通過事件機制觸發鉤子函式

initinjections

(vm)

;// resolve injections before data/props

initstate

(vm)

;initprops

(vm, vm.$options.props)

;//初始化屬性

initmethods

(vm, vm.$options.methods)

;// 初始化方法

initdata

(vm)

;// 初始化資料

initcomputed

(vm, vm.$options.computed)

;// 初始化計算屬性

initwatch

(vm, vm.$options.watch)

;// 初始化監聽屬性

initprovide

(vm)

;// resolve provide after data/props

callhook

(vm,

'created');

statemixin

(vue)

; 定義原型屬性$data、$props,定義原型方法$watch

eventsmixin

(vue)

; 定義原型方法$on、$once、$off、$emit

lifecyclemixin

(vue)

; 定義原型方法_update、$forceupdate、$destroy

rendermixin

(vue)

;installrenderhelpers

(vue.prototype)

;// install runtime convenience helpers

定義原型方法$nexttick、_render

_render

normalizescopedslots

(_parentvnode.data.scopedslots,vm.$slots,vm.$scopedslots)

;initglobalapi

(vue)

;// 全域性api定義

inituse

(vue)

;// 定義全域性方法vue.use

initmixin$1

(vue)

;//定義全域性方法vue.mixin

initextend

(vue)

;// 定義類繼承

initassetregisters

(vue)

;// 元件、指令、過濾器方法定義

// install platform specific utils

vue.config.mustuseprop = mustuseprop;

vue.config.isreservedtag = isreservedtag;

vue.config.isreservedattr = isreservedattr;

vue.config.gettagnamespace = gettagnamespace;

vue.config.isunknownelement = isunknownelement;

extend

(vue.options.directives, platformdirectives)

;// install platform runtime directives

extend

(vue.options.components, platformcomponents)

;// install platform runtime components

vue2 x原始碼導讀

src platforms web entry runtime with compiler.js src platforms web runtime index.js src core index.js src core instance index.js 建構函式的定義 function vue ...

leveldb 原始碼導讀

1,slice.h中slice是leveldb內部使用的字串類,很簡單 2,leveldb 儲存編碼 對於位元組儲存分大端小端位元組序還是小端小端位元組序 leveldb使用的是小端位元組序儲存,低位位元組排放在記憶體的低位址端,高位位元組排放在記憶體的高位址端。編碼分為變長的varint和固定大小...

試用補單平台原始碼 Vue 3 原始碼導讀

5號凌晨,尤雨溪公布了 vue 3 源 話不多說,我們趁熱對 vue 3 原始碼進行一些簡要的分析。如果你還沒有閱讀過 composition api rfc,可能無法完全看懂下面的內容。相容性目前打包後的 是 es2015 不支援 ie 11。對 typescript 的使用 目前的 98 以上使...