initState 狀態(tài)初始化

在配置標(biāo)準(zhǔn)化合并以及聲明周期初始化完成之后，會(huì)調(diào)用 callHook('beforeCreate') 來(lái)表示組件已進(jìn)入正式實(shí)例化階段。

這個(gè)時(shí)候會(huì)對(duì)數(shù)據(jù)、方法、監(jiān)聽(tīng)器等配置項(xiàng)進(jìn)行對(duì)應(yīng)的處理，并且在開(kāi)發(fā)環(huán)境還會(huì)進(jìn)行一系列校驗(yàn)，拋出校驗(yàn)異常信息。整個(gè)數(shù)據(jù)的初始化過(guò)程是 initInjection => initState => initProvide，但是 injection/provide 一般是一起使用，所以這里也替換一下順序，將這兩者放到后面一起分析。

首先是 initState 的函數(shù)定義：

?export function initState(vm: Component) {
? ?const opts = vm.$options
? ?if (opts.props) initProps(vm, opts.props)

? ?// Composition API
? ?initSetup(vm)

? ?if (opts.methods) initMethods(vm, opts.methods)
? ?if (opts.data) {
? ? ?initData(vm)
?  } else {
? ? ?const ob = observe((vm._data = {}))
? ? ?ob && ob.vmCount++
?  }
? ?if (opts.computed) initComputed(vm, opts.computed)
? ?if (opts.watch && opts.watch !== nativeWatch) {
? ? ?initWatch(vm, opts.watch)
?  }
?}

整個(gè)過(guò)程其實(shí)十分清晰：

• initProps：初始化 props 組件參數(shù)配置
• initSetup：解析 setup 配置，處理 setup 的返回值（這里主要是 2.7 版本之后為了適配 v3 語(yǔ)法新增的內(nèi)容）
• initMethods：初始化組件方法
• initData：初始化組件內(nèi)變量
• initComputed：初始化組件計(jì)算屬性
• initWatch：初始化組件內(nèi)部監(jiān)聽(tīng)器

1. initProps

該函數(shù)定義如下：

?function initProps(vm: Component, propsOptions: Object) {
? ?const propsData = vm.$options.propsData || {}
? ?const props = (vm._props = shallowReactive({}))
? ?const keys: string[] = (vm.$options._propKeys = [])
? ?const isRoot = !vm.$parent
? ?
? ?if (!isRoot) {
? ? ?toggleObserving(false)
?  }
? ?for (const key in propsOptions) {
? ? ?keys.push(key)
? ? ?const value = validateProp(key, propsOptions, propsData, vm)
? ? ?if (__DEV__) {
? ? ? ?const hyphenatedKey = hyphenate(key)
? ? ? ?if (isReservedAttribute(hyphenatedKey) || config.isReservedAttr(hyphenatedKey)) {
? ? ? ? ?warn('')
? ? ?  }
? ? ? ?defineReactive(props, key, value, () => {
? ? ? ? ?if (!isRoot && !isUpdatingChildComponent) {
? ? ? ? ? ?warn('')
? ? ? ?  }
? ? ?  })
? ?  } else {
? ? ? ?defineReactive(props, key, value)
? ?  }
? ? ?if (!(key in vm)) {
? ? ? ?proxy(vm, `_props`, key)
? ?  }
?  }
? ?toggleObserving(true)
?}

這個(gè)過(guò)程會(huì)遍歷整個(gè)組件的 props 配置項(xiàng)（mergeOptions 之后，已包含繼承和混入），并將每個(gè) prop key 從駝峰形式轉(zhuǎn)換為 - 短橫線連接的形式。

這也是為什么官方推薦 props 配置使用 小寫駝峰，而組件使用時(shí)綁定參數(shù)使用 - 短橫線 的原因。

之后，則是校驗(yàn)每個(gè) prop 的 key 是否符合規(guī)范（即不是 Vue 的內(nèi)置關(guān)鍵字 ref，key 等，也是不是配置里面 isReservedAttr(key) 禁止的屬性名）；最后，通過(guò) defineReactive 來(lái)對(duì) prop 進(jìn)行響應(yīng)式處理，并掛載到 vm._props 中。

當(dāng)然，上面的響應(yīng)式處理 只針對(duì)根組件，如果不是根組件的話，是會(huì)在函數(shù)前面部分調(diào)用 toggleObserving(false) 來(lái)關(guān)閉響應(yīng)式處理

2. initSetup

這個(gè)部分是為了適配 v3 語(yǔ)法新增的一部分，這里就不放源碼，只簡(jiǎn)單介紹一下。

該方法位于 src/v3/apiSetup.ts 文件內(nèi)，在執(zhí)行過(guò)程中，主要有以下幾步：

• 通過(guò) createSetupContext(vm) 創(chuàng)建一個(gè) setup 函數(shù)執(zhí)行過(guò)程中的上下文對(duì)象，該對(duì)象包括 attrs，listeners，slots，emit 幾個(gè)屬性，以及一個(gè) expose 方法；然后將這個(gè)上下文對(duì)象綁定到組件的 _setupContext 屬性上，最后調(diào)用 setCurrentInstance 將當(dāng)前上下文實(shí)例指定為當(dāng)前組件實(shí)例 vm
• 調(diào)用 pushTarget() 阻止過(guò)程中的依賴收集，并調(diào)用 invokeWithErrorHandling 來(lái)獲取 setup 函數(shù)的返回值
• 然后刪除 setup 中的當(dāng)前實(shí)例上下文，調(diào)用 popTarget 恢復(fù)依賴收集
• 判斷 setup 函數(shù)的執(zhí)行返回值，如果是函數(shù)，則說(shuō)明返回的是 render，將該返回值賦值給 options 用于后面執(zhí)行 mount 渲染；如果是對(duì)象，則會(huì)將返回值賦值給 vm._setupState，然后遍歷返回值對(duì)象，進(jìn)行響應(yīng)式處理

3. initMethods

函數(shù)定義如下：

?function initMethods(vm: Component, methods: Object) {
? ?const props = vm.$options.props
? ?for (const key in methods) {
? ? ?if (__DEV__) {
? ? ? ?if (typeof methods[key] !== 'function') {
? ? ? ? ?warn('')
? ? ?  }
? ? ? ?if (props && hasOwn(props, key)) {
? ? ? ? ?warn('')
? ? ?  }
? ? ? ?if (key in vm && isReserved(key)) {
? ? ? ? ?warn('')
? ? ?  }
? ?  }
? ? ?vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
?  }
?}

這部分就十分十分簡(jiǎn)單了，就是通過(guò) Function.bind 函數(shù)來(lái)更改組件配置 options 中的每一個(gè)方法的 this 指向，最后重新綁定到當(dāng)前組件上。

這里的校驗(yàn)其實(shí)就是校驗(yàn)名字是否會(huì)和 js 的內(nèi)置方法名沖突，或者與 props 中存在同名方法。

4. initData

在執(zhí)行 initData 之前，會(huì)校驗(yàn) options 中有沒(méi)有 data 配置，沒(méi)有則會(huì)初始化為一個(gè)空對(duì)象。

其函數(shù)定義如下：

?function initData(vm: Component) {
? ?let data: any = vm.$options.data
? ?data = vm._data = isFunction(data) ? getData(data, vm) : data || {}
? ?if (!isPlainObject(data)) {
? ? ?data = {}
? ? ?__DEV__ && warn('')
?  }
? ?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 (__DEV__) {
? ? ? ?if (methods && hasOwn(methods, key)) {
? ? ? ? ?warn('')
? ? ?  }
? ?  }
? ? ?if (props && hasOwn(props, key)) {
? ? ? ?__DEV__ && warn()
? ?  } else if (!isReserved(key)) {
? ? ? ?proxy(vm, `_data`, key)
? ?  }
?  }
? ?const ob = observe(data)
? ?ob && ob.vmCount++
?}

這里其實(shí)也比較簡(jiǎn)單，就是校驗(yàn)是否有與 props 或者 methods 同名的數(shù)據(jù)，并將其代理到 vm._data 上，最后通過(guò) observe 方法對(duì)數(shù)據(jù)進(jìn)行響應(yīng)式處理。

5. initComputed 與 initWatch

這兩部分主要是配置對(duì) data 與 props 的變量的 變化偵測(cè)（監(jiān)聽(tīng)） ，因?yàn)樯婕暗?Vue 的響應(yīng)式系統(tǒng)中的 Watcher 觀察者定義 與 依賴收集系統(tǒng)，整體的內(nèi)容比較多，所以后面整體講。

簡(jiǎn)單分析兩者的基本邏輯：

initComputed：

• 獲取 options.computed 里定義的每個(gè)計(jì)算屬性的 get 方法作為 getter（如果就是一個(gè)函數(shù)，則這個(gè)函數(shù)直接作為 getter）
• 如果該計(jì)算屬性的 key 不能在當(dāng)前的實(shí)例上找到，則直接通過(guò) defineComputed 定義一個(gè)計(jì)算屬性
• 如果能找到，則判斷是否是在 data，methods，props 中，并報(bào)出對(duì)應(yīng)錯(cuò)誤

initWatch：

這個(gè)過(guò)程則更加簡(jiǎn)單，因?yàn)椴挥眯ｒ?yàn) key 的重復(fù)性，所以會(huì)直接遍歷 options.watch，如果某個(gè)屬性的監(jiān)聽(tīng)器有兩個(gè) handler 方法，還會(huì)將方法提出來(lái)，最后調(diào)用 createWatcher 來(lái)創(chuàng)建監(jiān)聽(tīng)器。

到此這篇關(guān)于詳解Vue 2中的  initState 狀態(tài)初始化的文章就介紹到這了,更多相關(guān)Vue initState 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論