站長資訊網
做的事：1、選項合并，處理組件的配置內容；2、初始化vue實例生命周期相關的屬性；3、初始化自定義組件事件的監聽；4、初始化render渲染所需的slots、渲染函數等；5、調用beforeCreate函數；6、初始化注入數據；7、對props、data、watch等進行初始化；8、把祖輩傳下的數據注入后初始化provide；9、調用created函數；10、掛載DOM元素。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
創建實例
文件 src/instance/index.js 為創建Vue實例的入口文件
在創建之前首先會有一些混入的方法，用于初始化實例的方法和屬性
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
這里先看initMixin就行
initMixin(Vue) 初始化混入
initMixin方法的作用是混入Vue的_init方法，_init方法里的核心又是以下方法
- 合并options配置
- initLifecycle(vm)
- initEvents(vm)
- initRender(vm)
- callHook(vm, 'beforeCreate')
- initInjections(vm) // resolve injections before data/props
- initState(vm)
- initProvide(vm) // resolve provide after data/props
- callHook(vm, 'created')
0. 合并options配置
vm.$options = mergeOptions( // 合并options resolveConstructorOptions(vm.constructor), options || {}, vm )
合并options并在實例上掛載一個$options屬性。合并什么東西了？這里是分兩種情況的：
-
初始化new Vue
在執行
new Vue構造函數時，參數就是一個對象，也就是用戶的自定義配置；會將它和vue之前定義的原型方法，全局API屬性；還有全局的Vue.mixin內的參數，將這些都合并成為一個新的options，最后賦值給一個的新的屬性$options。 -
子組件初始化
如果是子組件初始化，除了合并以上那些外，還會將父組件的參數進行合并，如有父組件定義在子組件上的
event、props等等。
經過合并之后就可以通過
this.$options.data訪問到用戶定義的data函數，this.$options.name訪問到用戶定義的組件名稱，這個合并后的屬性很重要，會被經常使用到。
1. initLifecycle(vm)
主要作用是確認組件的父子關系和初始化某些實例屬性。
export function initLifecycle(vm: Component) { const options = vm.$options // 之前合并的屬性 let parent = options.parent; if (parent && !options.abstract) { // 找到第一個非抽象父組件 while (parent.$options.abstract && parent.$parent) { parent = parent.$parent } parent.$children.push(vm) } vm.$parent = parent // 找到后賦值 vm.$root = parent ? parent.$root : vm // 讓每一個子組件的$root屬性都是根組件 vm.$children = [] vm.$refs = {} vm._watcher = null ... vm._isDestroyed = false vm._isBeingDestroyed = false }
2. initEvents(vm)
初始化自定義組件事件的監聽,若存在父監聽事件,則添加到該實例上。 主要作用是將父組件在使用v-on或@注冊的自定義事件添加到子組件的事件中心中。
export function initEvents (vm: Component) { vm._events = Object.create(null) // 事件中心 vm._hasHookEvent = false // init parent attached events const listeners = vm.$options._parentListeners // 經過合并options得到的 if (listeners) { updateComponentListeners(vm, listeners) } }
3. initRender(vm)
初始化render渲染所需的slots、渲染函數等。其實就兩件事。 1、插槽的處理、 2、$createElm 也就是 render 函數中的 h 的聲明
export function initRender(vm) { vm._vnode = null ... vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) //轉化編譯器的 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) // 轉化手寫的 ... }
4. callHook(vm, 'beforeCreate')
調用 beforeCreate鉤子函數。現在這里只需要知道它會執行用戶自定義的生命周期方法，如果有mixin混入的也一并執行。
相關面試題：請問可以在beforeCreate鉤子內通過this訪問到data中定義的變量么，為什么以及請問這個鉤子可以做什么？
> 回答：是不可以訪問的，因為在vue初始化階段，這個時候data中的變量還沒有被掛載到this上，這個時候訪問值會是undefined。beforeCreate這個鉤子在平時業務開發中用的比較少，而像插件內部的instanll方法通過Vue.use方法安裝時一般會選在beforeCreate這個鉤子內執行，vue-router和vuex就是這么干的。
5. initInjections(vm)
后面的初始化順序是inject => state => provide 初始化inject在props/data之前,這樣做的目的是可以在props/data中使用inject內所注入的內容
export function initInjections (vm: Component) { const result = resolveInject(vm.$options.inject, vm) if (result) { toggleObserving(false) // 刻意為之不被響應式 Object.keys(result).forEach(key => { ... defineReactive(vm, key, result[key]) }) toggleObserving(true) } }
resolveInject的主要作用就是自下而上的一層一層的找當前被注入的數據
export function resolveInject (inject: any, vm: Component): ?Object { if (inject) { // inject is :any because flow is not smart enough to figure out cached // 首先定義一個result返回找到的結果。 const result = Object.create(null) const keys = hasSymbol ? Reflect.ownKeys(inject) : Object.keys(inject) // 接下來使用雙循環查找，外層的for循環會遍歷inject的每一項 for (let i = 0; i < keys.length; i++) { const key = keys[i] // #6574 in case the inject object is observed... if (key === '__ob__') continue const provideKey = inject[key].from let source = vm //然后再內層使用while循環自底向上的查找inject該項的父級是否有提供對應的依賴。 while (source) { if (source._provided && hasOwn(source._provided, provideKey)) { result[key] = source._provided[provideKey] break } source = source.$parent } if (!source) { if ('default' in inject[key]) { const provideDefault = inject[key].default result[key] = typeof provideDefault === 'function' ? provideDefault.call(vm) : provideDefault } else if (process.env.NODE_ENV !== 'production') { warn(`Injection "${key}" not found`, vm) } } } return result } }
6. initState(vm)
初始化會被使用到的狀態，狀態包括props，methods，data，computed，watch五個選項。（這里先看props，methods，data）
export function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) } }
6.1 initProps
- 主要作用是檢測子組件接受的值是否符合規則，以及讓對應的值可以用this直接訪問
function initProps(vm: Component, propsOptions: Object) { // 第二個參數為驗證規則 const propsData = vm.$options.propsData || {} // props具體的值 父組件傳過來的 const props = vm._props = {} // 存放props 組件內可以通過這個訪問到傳過來的props const isRoot = !vm.$parent // 是否是根節點 if (!isRoot) { // 不是根節點則關閉響應式 toggleObserving(false) } for (const key in propsOptions) { const value = validateProp(key, propsOptions, propsData, vm) defineReactive(props, key, value) if (!(key in vm)) { proxy(vm, `_props`, key) // 代理 this.xx實際上訪問的是 this._props.xx } } toggleObserving(true) }
6.2 initMethods
- 主要作用是將methods內的方法掛載到this下。
function initMethods (vm: Component, methods: Object) { const props = vm.$options.props for (const key in methods) { if(methods[key] == null) { // methods[key] === null || methods[key] === undefined 的簡寫 warn(`只定義了key而沒有相應的value`) } if(props && hasOwn(props, key)) { warn(`方法名和props的key重名了`) } if((key in vm) && isReserved(key)) { warn(`方法名已經存在而且以_或$開頭`) } vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) // 相當于methods[key].bind(vm) } }
6.3 initData
function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {} if (!isPlainObject(data)) { data = {} } // proxy data on instance const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length while (i--) { const key = keys[i] if (methods && hasOwn(methods, key)) { warn(`和methods內的方法重名了`) } if (props && hasOwn(props, key)) { warn(`和props內的key重名了`) } else if (!isReserved(key)) { // key不能以_或$開頭 proxy(vm, `_data`, key) } } // observe data observe(data, true /* asRootData */) }
initProvide(vm)
很容易看出是把用戶傳進來的provide選項先獲取到，如果是方法則執行一下再掛載到實例的_provided屬性,不是則直接掛載到_provided屬性
export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide } }
7.callHook(vm, 'created')
調用 created鉤子函數
總結：Vue初始化都做了什么？
1、選項合并，處理組件的配置內容，將傳入的options與構造函數本身的options進行合并(用戶選項和系統默認的選項進行合并)
2、初始化vue實例生命周期相關的屬性，定義了比如：root、root、root、parent、children、children、children、refs
3、初始化自定義組件事件的監聽,若存在父監聽事件,則添加到該實例上
4、初始化render渲染所需的slots、渲染函數等。其實就兩件事：插槽的處理 和 $createElm的聲明，也就是 render 函數中的 h 的聲明
5、調用 beforeCreate 鉤子函數，在這里就能看出一個組件在創建前和后分別做了哪些初始化
6、初始化注入數據，隔代傳參時 先inject。作為一個組件，在要給后輩組件提供數據之前，需要先把祖輩傳下來的數據注入進來
7、對props,methods,data,computed,watch進行初始化，包括響應式的處理
8、在把祖輩傳下來的數據注入進來以后 再初始化provide
9、調用 created 鉤子函數，初始化完成，可以執行掛載了
10、掛載到對應DOM元素上。如果組件構造函數設置了el選項，會自動掛載，所以就不用再手動調用$mount去掛載
【
