vector 不初始化时什么状态_Vue原理解析(三):初始化时created之前做了什么?...
讓我們繼續this._init()的初始化之旅,接下來又會執行這樣的三個初始化方法:
initInjections(vm) initState(vm) initProvide(vm)5. initInjections(vm): 主要作用是初始化inject,可以訪問到對應的依賴。
inject和provide這里需要簡單的提一下,這是vue@2.2版本添加的一對需要一起使用的API,它允許父級組件向它之后的所有子孫組件提供依賴,讓子孫組件無論嵌套多深都可以訪問到,很cool有木有~
- provide:提供一個對象或是返回一個對象的函數。
- inject:是一個字符串數組或對象。
這一對API在vue官網有給出兩條食用提示:
provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。- 大概是因為會讓組件數據層級關系變的混亂的緣故,但在開發組件庫時會很好使。
- 有個小技巧,這里可以將根組件data內定義的屬性提供給子孫組件,這樣在不借助vuex的情況下就可以實現簡單的全局狀態管理,還是很cool的~
一但觸發handleClick事件之后,無論嵌套多深的子孫組件只要是使用了inject注入this.app.info變量的地方都會被響應,這就完成了簡易的vuex。更多的示例大家可以去vue的官網翻閱,這里就不碼字了,現在我們來分析下這么cool的功能它究竟是怎么實現的~
雖然inject和provide是成對使用的,但是二者在內部是分開初始化的。從上面三個初始化方法就能看出,先初始化inject,然后初始化props/data狀態相關,最后初始化provide。這樣做的目的是可以在props/data中使用inject內所注入的內容。
我們首先來看一下初始化inject時的方法定義:
export function initInjections(vm) {const result = resolveInject(vm.$options.inject, vm) // 找結果... }vm.$options.inject為之前合并后得到的用戶自定義的inject,然后使用resolveInject方法找到我們想要的結果,我們看下resolveInject方法的定義:
export function resolveInject (inject, vm) {if (inject) {const result = Object.create(null)const keys = Object.keys(inject) //省略Symbol情況for (let i = 0; i < keys.length; i++) {const key = keys[i]const provideKey = inject[key].fromlet source = vmwhile (source) {if (source._provided && hasOwn(source._provided, provideKey)) { //hasOwn為是否有result[key] = source._provided[provideKey]break}source = source.$parent}... vue@2.5后新增設置inject默認參數相關邏輯}return result} }首先定義一個result返回找到的結果。接下來使用雙循環查找,外層的for循環會遍歷inject的每一項,然后再內層使用while循環自底向上的查找inject該項的父級是否有提供對應的依賴。
Ps:這里可能有人會有疑問,之前inject的定義明明是數組,這里怎么可以通過Object.keys取值?這是因為上一章再做options合并時,也會對參數進行格式化,如props的格式,定義為數組也會被轉為對象格式,inject被定義時是這樣的:
定義時: {inject: ['app'] }格式化后: {inject: {app: {from: 'app'}} }書接上文,source就是當前的實例,而source._provided內保存的就是當前provide提供的值。首先從當前實例查找,接著將它的父組件實例賦值給source,在它的父組件查找。找到后使用break跳出循環,將搜索的結果賦值給result,接著查找下一個。
Ps:可能有人又會有疑問,這個時候是先初始化的inject再初始化的provide,怎么訪問父級的provide了?它根本就沒初始化阿,這個時候我們就要再思考下了,因為vue是組件式的,首先就會初始化父組件,然后才是初始化子組件,所以這個時候是有source._provided屬性的。
找到了想到的結果之后,我們補全之前initInjections的定義:
export function initInjections(vm) {const result = resolveInject(vm.$options.inject, vm)if(result) { // 如果有結果toggleObserving(false) // 刻意為之不被響應式Object.keys(result).forEach(key => {...defineReactive(vm, key, result[key])})toggleObserving(true)} }如果有搜索結果,首先會調用toggleObserving(false),具體實現不用理會,只用知道這個方法的作用是設置一個標志位,將決定defineReactive()方法是否將它的第三個參數設置為響應式數據,也就是決定result[key]這個值是否會被設置為響應式數據,這里的參數為false,只是在vm下掛載key對應普通的值,不過這樣就可以在當前實例使用this訪問到inject內對應的依賴項了,設置完畢之后再調用toggleObserving(true),改變標志位,讓defineReactive()可以設置第三個參數為響應式數據(defineReactive是響應式原理很重要的方法,這里了解即可),也就是它該有的樣子。以上就是inject實現的相關原理,一句話來說就是,首先遍歷每一項,然后挨個遍歷每一項父級是否有依賴。
6. initState(vm): 初始化會被使用到的狀態,狀態包括props,methods,data,computed,watch五個選項。
首先看下initState(vm)方法的定義:
export function initState(vm) {...const opts = vm.$optionsif(opts.props) initProps(vm, opts.props)if(opts.methods) initMethods(vm, opts.methods)if(opts.data) initData(vm)...if(opts.computed) initComputed(vm, opts.computed)if(opts.watch && opts.watch !== nativeWatch) {initWatch(vm, opts.watch)} }現在這里的話只會介紹前面三類狀態的初始化做了什么,也就是props,methods,data,因為computed和watch會涉及到響應式相關的watcher,這里先略過。接下來我們依次有請這三位的初始化方法登場:
6.1 initProps (vm, propsOptions):- 主要作用是檢測子組件接受的值是否符合規則,以及讓對應的值可以用this直接訪問。
我們知道props是作為父組件向子組件通信的重要方式,而initProps內的第二個參數propsOptions,就是當前實例也就是通信角色里的子組件,它所定義的接受參數的規則。子組件的props規則是可以使用數組形式的定義的,不過再經過合并options之后會被格式化為對象的形式:
定義時: {props: ['name', 'age'] }格式化后: {name: {type: null},age: {type: null} }所以在定義props規則時,直接使用對象格式吧,這也是更好的書寫規范。
知道了規則之后,接下來需要知道父組件傳遞給子組件具體的值,它以對象的格式被放在vm.$options.propsData內,這也是合并options時得到的。接下來在實例下定義了一個空對象vm._props,它的作用是將符合規格的值掛載到它下面。isRoot的作用是判斷當前組件是否是根組件,如果不是就不將props的轉為響應式數據。
接下來遍歷格式化后的props驗證規則,通過validateProp方法驗證規則并得到相應的值,將得到的值掛載到vm._props下。這個時候就可以通過this._props訪問到props內定義的值了:
props: ['name'], methods: {handleClick() {console.log(this._props.name)} }不過直接訪問內部的私有變量這種方式并不友好,所以vue內部做了一層代理,將對this.name的訪問轉而為對this._props.name的訪問。這里的proxy需要介紹下,因為之后的data也會使用到,看下它的定義:
格式化了一下: export function proxy(target, sourceKey, key) {Object.defineProperty(target, key, {enumerable: true,configurable: true,get: function () {return this[sourceKey][key]},set: function () {this[sourceKey][key] = val}}) }其實很簡單,只是定義一個對象值的get方法,讀取時讓其返回另外的一個值,這里就完成了props的初始化。
6.2 initMethods (vm, methods):- 主要作用是將methods內的方法掛載到this下。
methods的初始化相較而言就簡單了很多。不過它也有很多邊界情況,如只定義了key而沒有方法具體的實現、key和props重名了、key已經存在且命名不規范,以_或$開頭,至于為什么不行,我們第一章的時候有說明了。最后將methods內的方法掛載到this下,就完成了methods的初始化。
6.3 initData (vm):- 主要作用是初始化data,還是老套路,掛載到this下。有個重要的點,之所以data內的數據是響應式的,是在這里初始化的,這個大家得有個印象~。
首先通過vm.$options.data得到用戶定義的data,如果是function格式就執行它,并返回執行之后的結果,否則返回data或{},將結果賦值給vm._data這個私有屬性。和props一樣的套路,最后用來做一層代理,如果得到的結果不是對象格式就是報錯了。
然后遍歷data內的每一項,不能和methods以及props內的key重名,然后使用proxy做一層代理。注意最后會執行一個方法observe(data, true),它的作用了是遞歸的讓data內的每一項數據都變成響應式的。
其實不難發現它們仨主要做的事情差不多,首先不要相互之間有重名,然后可以被this直接訪問到。
7. initProvide(vm): 主要作用是初始化provide為子組件提供依賴。
provide選項應該是一個對象或是函數,所以對它取值即可,就像取data內的值類似,看下它的定義:
export function initProvide (vm) {const provide = vm.$options.provideif (provide) {vm._provided = typeof provide === 'function'? provide.call(vm): provide} }首先通過vm.$options.provide取得用戶定義的provide選項,如果是一個function類型就執行一下,得到返回后的結果,將其賦值給了vm._provided私有屬性,所以子組件在初始化inject時就可以訪問到父組件提供的依賴了;如果不是function類型就直接返回定義的provide。
8. callHook(vm, 'created'): 執行用戶定義的created鉤子函數,有mixin混入的也一并執行。
終于我們越過了created鉤子函數,還是分別用一句話來介紹它們主要都干了什么事:
- initInjections(vm):讓子組件inject的項可以訪問到正確的值
- initState(vm):將組件定義的狀態掛載到this下。
- initProvide(vm):初始化父組件提供的provide依賴。
- created:執行組件的created鉤子函數
初始化的階段算是告一段落了,接下來我們會進入組件的掛載階段。按照慣例我們還是以一道vue容易被問道的面試題作為本章的結束吧~:
面試官微笑而又不失禮貌的問道:- 請問methods內的方法可以使用箭頭函數么,會造成什么樣的結果?
懟回去:
- 是不可以使用箭頭函數的,因為箭頭函數的this是定義時就綁定的。在vue的內部,methods內每個方法的上下文是當前的vm組件實例,methods[key].bind(vm),而如果使用使用箭頭函數,函數的上下文就變成了父級的上下文,也就是undefined了,結果就是通過undefined訪問任何變量都會報錯。
順手點個贊或關注唄,找起來也方便~
胡成:你可能會用的上的一個vue功能組件庫,持續完善中...?zhuanlan.zhihu.com總結
以上是生活随笔為你收集整理的vector 不初始化时什么状态_Vue原理解析(三):初始化时created之前做了什么?...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python dataframe切片_p
- 下一篇: 串口通信 校验码_一文读懂S7-200