下面我就來看看VueJS中主要的組件選項(xiàng)英支，以及它們在Vue實(shí)例對象初始化過程中是如何完成屬性合并的。
選項(xiàng)options / 生命周期鉤子
首先，我們要看看VueJS默認(rèn)都提供了哪些生命周期鉤子。
前面我們曾經(jīng)學(xué)習(xí)過VueJS初始化Global Config的相關(guān)過程慢洋，涉及到一個(gè)文件 'src/core/config.js'，其中給定了一些默認(rèn)的配置選項(xiàng)陆盘。
我們打開這個(gè)文件普筹，找到 _lifecycleHooks 的具體配置。
/**
* List of lifecycle hooks.
*/
_lifecycleHooks: [
'beforeCreate',
'created',
'beforeMount',
'mounted',
'beforeUpdate',
'updated',
'beforeDestroy',
'destroyed',
'activated',
'deactivated'
],
這些就是默認(rèn)給出的生命周期鉤子的聲明礁遣，Vue實(shí)例對象在整個(gè)存活過程中斑芜，會(huì)根據(jù)當(dāng)前所處的狀態(tài)，來觸發(fā)這些鉤子祟霍。
有了這些鉤子杏头，我們就可以以切面的方式，在不同的時(shí)間節(jié)點(diǎn)上進(jìn)行一些其他操作沸呐。而且實(shí)現(xiàn)方式非常簡單醇王，就是在初始化Vue實(shí)例對象時(shí)，給定具體鉤子對應(yīng)的回調(diào)即可崭添。
這樣寓娩，接下來我們就有必要看看具體這些鉤子的回調(diào)時(shí)如何被調(diào)用的。
在之前我們學(xué)習(xí) VueJS 實(shí)例方法的源碼時(shí)呼渣，經(jīng)常會(huì)看到代碼之中會(huì)調(diào)用 callHook(vm, hook) 這樣的語句棘伴，很明顯這就是在調(diào)用相關(guān)的生命周期鉤子的回調(diào)函數(shù)。
來看看這個(gè) callhook 函數(shù)的實(shí)現(xiàn)細(xì)節(jié)：
// src/core/instance/lifecycle.js
export function callHook (vm: Component, hook: string) {
const handlers = vm.$options[hook]
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
handlers[i].call(vm)
}
}
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
}
- 函數(shù)接收兩個(gè)參數(shù)屁置，第一個(gè)是Vue實(shí)例對象焊夸，第二個(gè)是hook的名字
- 根據(jù) hook 在 vm.$options 中找到相應(yīng)的回調(diào)handlers。（為何有多個(gè)handlers蓝角，可以參看'src/core/util/options.js'文件中mergeHook相關(guān)邏輯）
- 依次調(diào)用 handler.call(vm)阱穗，這樣就使得所有的生命周期鉤子自動(dòng)綁定
this上下文到實(shí)例中- vue實(shí)例根據(jù)條件調(diào)用 vm.$emit 觸發(fā)'hook:xxxx'事件
可以前往 這里 查看生命周期示例饭冬。
-
beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed, activated, deactivated
那這些選項(xiàng)是如何初始化的呢。
我們之前提到過揪阶，VueJS預(yù)定義了一些屬性合并策略供內(nèi)部使用昌抠。其中有一項(xiàng)就是針對生命周期鉤子的，我們具體來看一下鲁僚。
打開 'src/core/util/options.js' 文件炊苫，找到以下代碼
/**
* Hooks and param attributes are merged as arrays.
*/
function mergeHook (
parentVal: ?Array<Function>,
childVal: ?Function | ?Array<Function>
): ?Array<Function> {
return childVal
? parentVal
? parentVal.concat(childVal)
: Array.isArray(childVal)
? childVal
: [childVal]
: parentVal
}
config._lifecycleHooks.forEach(hook => {
strats[hook] = mergeHook
})
由代碼可見，針對所有的生命周期鉤子蕴茴，都使用同一個(gè)屬性合并策略劝评。
- 子實(shí)例不存在，直接返回父實(shí)例
- 子實(shí)例存在倦淀，父實(shí)例不存在，返回子實(shí)例（子實(shí)例不是數(shù)組則包裝為數(shù)組）
- 父子實(shí)例都存在声畏，合并兩個(gè)實(shí)例
選項(xiàng)options / 資源
接下來撞叽，我們看看VueJS默認(rèn)都提供了資源類型的選項(xiàng)。
前面我們曾經(jīng)學(xué)習(xí)過VueJS初始化Global Config的相關(guān)過程插龄，涉及到一個(gè)文件 'src/core/config.js'愿棋，其中給定了一些默認(rèn)的配置選項(xiàng)。
我們打開這個(gè)文件均牢，找到 _assetTypes 的具體配置糠雨。
/**
* List of asset types that a component can own.
*/
_assetTypes: [
'component',
'directive',
'filter'
],
以上這些就是對應(yīng)官方API中與資源相關(guān)的選項(xiàng)。
-
components, directives, filters
這些選項(xiàng)的初始化可以參考以下代碼：
/**
* Assets
*
* When a vm is present (instance creation), we need to do
* a three-way merge between constructor options, instance
* options and parent options.
*/
function mergeAssets (parentVal: ?Object, childVal: ?Object): Object {
const res = Object.create(parentVal || null)
return childVal
? extend(res, childVal)
: res
}
config._assetTypes.forEach(function (type) {
strats[type + 's'] = mergeAssets
})
由代碼可見徘跪，針對上面3種資源選項(xiàng)甘邀，都使用同一個(gè)屬性合并策略。
- 代碼邏輯相對簡單垮庐，詳見上面的注釋
選項(xiàng)options / 其它
對于其它一些屬性松邪，代碼相對分散。這里哨查，我們根據(jù)預(yù)定義的屬性合并策略逗抑，來依次了解一下。
-
el, propsData
/**
* Options with restrictions
*/
if (process.env.NODE_ENV !== 'production') {
strats.el = strats.propsData = function (parent, child, vm, key) {
if (!vm) {
warn(
`option "${key}" can only be used during instance ` +
'creation with the `new` keyword.'
)
}
return defaultStrat(parent, child)
}
}
...
/**
* Default strategy.
*/
const defaultStrat = function (parentVal: any, childVal: any): any {
return childVal === undefined
? parentVal
: childVal
}
對于這兩個(gè)選項(xiàng)的合并寒亥，使用默認(rèn)的合并策略邮府。（在非生產(chǎn)環(huán)境，若 vm 實(shí)例不存在溉奕，給出警告信息）
-
watch
/**
* Watchers.
*
* Watchers hashes should not overwrite one
* another, so we merge them as arrays.
*/
strats.watch = function (parentVal: ?Object, childVal: ?Object): ?Object {
/* istanbul ignore if */
if (!childVal) return parentVal
if (!parentVal) return childVal
const ret = {}
extend(ret, parentVal)
for (const key in childVal) {
let parent = ret[key]
const child = childVal[key]
if (parent && !Array.isArray(parent)) {
parent = [parent]
}
ret[key] = parent
? parent.concat(child)
: [child]
}
return ret
}
-
props, methods, computed
/**
* Other object hashes.
*/
strats.props =
strats.methods =
strats.computed = function (parentVal: ?Object, childVal: ?Object): ?Object {
if (!childVal) return parentVal
if (!parentVal) return childVal
const ret = Object.create(null)
extend(ret, parentVal)
extend(ret, childVal)
return ret
}
-
data
/**
* Data
*/
strats.data = function (
parentVal: any,
childVal: any,
vm?: Component
): ?Function {
if (!vm) {
// in a Vue.extend merge, both should be functions
if (!childVal) {
return parentVal
}
if (typeof childVal !== 'function') {
process.env.NODE_ENV !== 'production' && warn(
'The "data" option should be a function ' +
'that returns a per-instance value in component ' +
'definitions.',
vm
)
return parentVal
}
if (!parentVal) {
return childVal
}
// when parentVal & childVal are both present,
// we need to return a function that returns the
// merged result of both functions... no need to
// check if parentVal is a function here because
// it has to be a function to pass previous merges.
return function mergedDataFn () {
return mergeData(
childVal.call(this),
parentVal.call(this)
)
}
} else if (parentVal || childVal) {
return function mergedInstanceDataFn () {
// instance merge
const instanceData = typeof childVal === 'function'
? childVal.call(vm)
: childVal
const defaultData = typeof parentVal === 'function'
? parentVal.call(vm)
: undefined
if (instanceData) {
return mergeData(instanceData, defaultData)
} else {
return defaultData
}
}
}
}
- 從上面的代碼可以看出褂傀，針對于data這個(gè)選項(xiàng)的合并策略，返回的是一個(gè)具體的合并屬性的函數(shù)腐宋。
- 為何要返回一個(gè)函數(shù)紊服，我沒看看官方的解釋檀轨。
當(dāng)一個(gè)組件被定義， data 必須聲明為返回一個(gè)初始數(shù)據(jù)對象的函數(shù)欺嗤，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例参萄。 如果 data 仍然是一個(gè)純粹的對象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對象煎饼！ 通過提供 data 函數(shù)讹挎，每次創(chuàng)建一個(gè)新實(shí)例后，我們能夠調(diào)用 data 函數(shù)吆玖，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對象筒溃。
