new Vue(obj)の時、底層は何を経験しましたか?
new Vue(obj)の時、底層は何を経験しましたか?
newまでの準備、TARGET:web-full-dev src/core/instance/index.js ES 5構文を使用したVueコンストラクタ の作成は続いて順次実行するが、以下はいずれもVueプロトタイプオブジェクトへの混入方法や属性、あるいはアクセサ属性などである: . src/core/index.js initGlobalAPIいくつかのグローバルAPI に混入他の に混入. src/platforms/web/runtime/index.js 属性 を追加 src/platforms/web/entry-runtime-with-compiler.js 属性 を追加は最終的にこのようなオブジェクト を形成する.
初期化Vueが完了し、ユーザーnew Vueを待つ new Vueがオブジェクトに入力されたときに実行される_init 内部vmを生成する.uid,uid 0から を加算 vm._isVueはtrue//a flag to avoid this being observed vm.$を更新options vm.の更新renderProxy 循環参照vmを追加self = vm 次の一連の関数は を実行する.初期化vm.name vm. o p t i o n s . e lに値がある、v mを実行する.options.elに値がある場合はvmを実行する.options.elに値がある場合はvmを実行する.mount(vm.$options.el) src/platforms/web/entry-runtime-with-compilerを実行する.jsは,render関数があるか否かを判断し,ないと1つ生成する.vm. o p t i o n s . r e n d e r , v m . options.render,vm. options.render,vm.options.staticRenderFns. templateのテンプレート文字列を取得し、templateがなければel内のテンプレート文字列を取得し、astツリーを生成し、astを最適化し、最終的にrenderに匿名関数を生成し、関数内部フォーマットはwith(this){return${code}`、ここでcodeはこのcreateElementのパッケージ を含むライフサイクルフックbeforeMount を実行 watcherを作成し、コンポーネントをwatcherに追加し、updateComponent を実行します. updateComponentパッケージvm.render()、この関数はvm.$をカプセル化しています.options.render最終生成VNode はvmを実行する.patch、src/core/vdom/patchに進みます.jsによるdiffコントラストによるdomのレンダリング ライフサイクルフックmountedを実行します. 全体フロー実行完了
newまでの準備、TARGET:web-full-dev
initMixin(Vue) // _init()
stateMixin(Vue) // $delete,$set,$watch ，$data,$props ，$data,$props
eventsMixin(Vue) // $emit,$off,$on,$once
lifecycleMixin(Vue) // $forceUpdate,$destroy,_update
renderMixin(Vue) // $nextTick，_render，
installRenderHelpers _n，_o，_s，_l，_t，_q，_i，_m，_f，_k，_b，_v，_e，_u，_g，_d，_p
Object.defineProperty(Vue, 'config', configDef)
config
//util ， 。
Vue.util = {
warn,
extend,
mergeOptions,
defineReactive
}
Vue.set
Vue.delete
Vue.nextTick
Vue.observable
Vue.options
initUse(Vue) //Vue.use
initMixin(Vue) //Vue.mixin
initExtend(Vue) //Vue.cid, Vue.extend
initAssetRegisters(Vue)// 'component','directive','filter'
Vue.prototype.$isServer
Vue.prototype.$ssrContext
Vue.FunctionalRenderContext
Vue.version
Vue.config.mustUseProp
Vue.config.isReservedTag
Vue.config.isReservedAttr
Vue.config.getTagNamespace
Vue.config.isUnknownElement
Vue.prototype.__patch__
Vue.prototype.$mount
Vue.prototype.$mount // ， $mount ， ， $mount
Vue.compile
Vue {
$data: undefined,
$isServer: false,
$props: undefined,
$route: '',
$router: '',
$ssrContext: undefined,
__proto__: {
$delete: ƒ del(target, key),
$destroy: ƒ (),
$emit: ƒ (event),
$forceUpdate: ƒ (),
$mount: ƒ ( el, hydrating ),
$nextTick: ƒ (fn),
$off: ƒ (event, fn),
$on: ƒ (event, fn),
$once: ƒ (event, fn),
$set: ƒ (target, key, val),
$watch: ƒ ( expOrFn, cb, options ),
__patch__: ƒ patch(oldVnode, vnode, hydrating, removeOnly),
_b: ƒ bindObjectProps( data, tag, value, asProp, isSync ),
_d: ƒ bindDynamicKeys(baseObj, values),
_e: ƒ (text),
_f: ƒ resolveFilter(id),
_g: ƒ bindObjectListeners(data, value),
_i: ƒ looseIndexOf(arr, val),
_init: ƒ (options),
_k: ƒ checkKeyCodes( eventKeyCode, key, builtInKeyCode, eventKeyName, builtInKeyName ),
_l: ƒ renderList( val, render ),
_m: ƒ renderStatic( index, isInFor ),
_n: ƒ toNumber(val),
_o: ƒ markOnce( tree, index, key ),
_p: ƒ prependModifier(value, symbol),
_q: ƒ looseEqual(a, b),
_render: ƒ (),
_s: ƒ toString(val),
_t: ƒ renderSlot( name, fallback, props, bindObject ),
_u: ƒ resolveScopedSlots(),,
_update: ƒ (vnode, hydrating),
_v: ƒ createTextVNode(val),
$data: (...),
$isServer: (...),
$props: (...),
$route: (...),
$router: (...),
$ssrContext: (...),
constructor: ƒ Vue(options),
get $data: ƒ (),
set $data: ƒ (),
get $isServer: ƒ (),
get $props: ƒ (),
set $props: ƒ (),
get $route: ƒ (),
get $router: ƒ (),
get $ssrContext: ƒ (),
},
__proto__: {
constructor: ƒ Object(),
hasOwnProperty: ƒ hasOwnProperty(),
isPrototypeOf: ƒ isPrototypeOf(),
propertyIsEnumerable: ƒ propertyIsEnumerable(),
toLocaleString: ƒ toLocaleString(),
toString: ƒ toString(),
valueOf: ƒ valueOf(),
__defineGetter__: ƒ __defineGetter__(),
__defineSetter__: ƒ __defineSetter__(),
__lookupGetter__: ƒ __lookupGetter__(),
__lookupSetter__: ƒ __lookupSetter__(),
get __proto__: ƒ __proto__(),
set __proto__: ƒ __proto__(),
}
}
初期化Vueが完了し、ユーザーnew Vueを待つ
initLifecycle(vm)
/*
vm.$parent
vm.$root
vm.$children
vm.$refs
vm._watcher
vm._inactive
vm._directInactive
vm._isMounted
vm._isDestroyed
vm._isBeingDestroyed
*/
initEvents(vm)
/*
vm $once, $on，$off，$emit ，
。
null
vm._events = Object.create(null)
vm._hasHookEvent = false
*/
initRender(vm)
/*
vm._vnode
vm._staticTrees
vm.$vnode
vm.$slots
vm.$scopedSlots
vm._c vm.$createElement
createElement 。
createElement _createElement
VNode
vm, '$attrs'
vm, '$listeners'
*/
callHook(vm, 'beforeCreate')
/*
beforeCreate
*/
initInjections(vm) // resolve injections before data/props
/*
， vm.$options.inject from vm._provided null result ， result ， defineReactive(vm, key, result[key])；
defineReactive Object.defineProperty。
*/
initState(vm)
/*
vue ， ， :
props,initProps
methods,initMethods
data,initData// ， ， Object.defineProperty
computed,initComputed
watch,initWatch
*/
initProvide(vm) // resolve provide after data/props
/*
vm.$options.provide ， vm._provided， vm._provided
*/
callHook(vm, 'created')
/*
created
*/