2019-09-04 10:25:38 +08:00
|
|
|
import {
|
2019-09-07 00:58:31 +08:00
|
|
|
ComponentInternalInstance,
|
2019-09-04 10:25:38 +08:00
|
|
|
Data,
|
2019-10-22 01:44:01 +08:00
|
|
|
SetupContext,
|
2019-12-16 23:36:48 +08:00
|
|
|
RenderFunction,
|
2020-02-16 10:04:29 +08:00
|
|
|
SFCInternalOptions,
|
2020-03-24 04:14:56 +08:00
|
|
|
PublicAPIComponent,
|
|
|
|
Component
|
2019-09-04 10:25:38 +08:00
|
|
|
} from './component'
|
|
|
|
import {
|
|
|
|
isFunction,
|
|
|
|
extend,
|
|
|
|
isString,
|
|
|
|
isObject,
|
|
|
|
isArray,
|
2019-10-14 14:15:31 +08:00
|
|
|
EMPTY_OBJ,
|
2020-03-24 23:59:00 +08:00
|
|
|
NOOP,
|
2020-04-15 05:40:41 +08:00
|
|
|
hasOwn,
|
|
|
|
isPromise
|
2019-09-04 10:25:38 +08:00
|
|
|
} from '@vue/shared'
|
2020-02-14 13:13:54 +08:00
|
|
|
import { computed } from './apiComputed'
|
2019-12-31 00:30:12 +08:00
|
|
|
import { watch, WatchOptions, WatchCallback } from './apiWatch'
|
2019-09-04 10:25:38 +08:00
|
|
|
import { provide, inject } from './apiInject'
|
|
|
|
import {
|
|
|
|
onBeforeMount,
|
|
|
|
onMounted,
|
|
|
|
onBeforeUpdate,
|
|
|
|
onUpdated,
|
|
|
|
onErrorCaptured,
|
|
|
|
onRenderTracked,
|
|
|
|
onBeforeUnmount,
|
2019-10-02 21:46:29 +08:00
|
|
|
onUnmounted,
|
2019-10-30 10:28:38 +08:00
|
|
|
onActivated,
|
|
|
|
onDeactivated,
|
2019-10-15 11:15:09 +08:00
|
|
|
onRenderTriggered,
|
|
|
|
DebuggerHook,
|
|
|
|
ErrorCapturedHook
|
2019-09-04 10:25:38 +08:00
|
|
|
} from './apiLifecycle'
|
2019-10-22 01:57:20 +08:00
|
|
|
import {
|
|
|
|
reactive,
|
|
|
|
ComputedGetter,
|
2020-04-17 00:49:50 +08:00
|
|
|
WritableComputedOptions
|
2019-10-22 01:57:20 +08:00
|
|
|
} from '@vue/reactivity'
|
2020-04-06 06:39:22 +08:00
|
|
|
import {
|
|
|
|
ComponentObjectPropsOptions,
|
|
|
|
ExtractPropTypes,
|
|
|
|
normalizePropsOptions
|
|
|
|
} from './componentProps'
|
2020-04-04 07:08:17 +08:00
|
|
|
import { EmitsOptions } from './componentEmits'
|
2019-09-06 23:19:22 +08:00
|
|
|
import { Directive } from './directives'
|
2019-10-02 22:03:43 +08:00
|
|
|
import { ComponentPublicInstance } from './componentProxy'
|
|
|
|
import { warn } from './warning'
|
2019-09-06 23:19:22 +08:00
|
|
|
|
2019-10-22 23:26:48 +08:00
|
|
|
export interface ComponentOptionsBase<
|
2019-09-06 23:19:22 +08:00
|
|
|
Props,
|
|
|
|
RawBindings,
|
|
|
|
D,
|
|
|
|
C extends ComputedOptions,
|
2020-04-04 00:05:52 +08:00
|
|
|
M extends MethodOptions,
|
|
|
|
E extends EmitsOptions,
|
|
|
|
EE extends string = string
|
|
|
|
> extends LegacyOptions<Props, D, C, M>, SFCInternalOptions {
|
2019-09-06 23:19:22 +08:00
|
|
|
setup?: (
|
2020-01-11 00:46:34 +08:00
|
|
|
this: void,
|
2019-09-06 23:19:22 +08:00
|
|
|
props: Props,
|
2020-04-04 00:05:52 +08:00
|
|
|
ctx: SetupContext<E>
|
2019-10-22 01:44:01 +08:00
|
|
|
) => RawBindings | RenderFunction | void
|
2019-09-06 23:19:22 +08:00
|
|
|
name?: string
|
2019-12-11 23:39:29 +08:00
|
|
|
template?: string | object // can be a direct DOM node
|
2019-09-06 23:19:22 +08:00
|
|
|
// Note: we are intentionally using the signature-less `Function` type here
|
|
|
|
// since any type with signature will cause the whole inference to fail when
|
|
|
|
// the return expression contains reference to `this`.
|
|
|
|
// Luckily `render()` doesn't need any arguments nor does it care about return
|
|
|
|
// type.
|
|
|
|
render?: Function
|
2020-01-24 10:01:56 +08:00
|
|
|
// SSR only. This is produced by compiler-ssr and attached in compiler-sfc
|
2020-01-30 05:46:18 +08:00
|
|
|
// not user facing, so the typing is lax and for test only.
|
|
|
|
ssrRender?: (
|
|
|
|
ctx: any,
|
|
|
|
push: (item: any) => void,
|
|
|
|
parentInstance: ComponentInternalInstance
|
|
|
|
) => void
|
2020-02-16 10:04:29 +08:00
|
|
|
components?: Record<string, PublicAPIComponent>
|
2019-09-06 23:19:22 +08:00
|
|
|
directives?: Record<string, Directive>
|
2019-10-26 00:12:17 +08:00
|
|
|
inheritAttrs?: boolean
|
2020-04-04 00:05:52 +08:00
|
|
|
emits?: E | EE[]
|
2019-11-01 00:43:05 +08:00
|
|
|
|
2020-03-24 23:59:00 +08:00
|
|
|
// Internal ------------------------------------------------------------------
|
|
|
|
|
|
|
|
// marker for AsyncComponentWrapper
|
|
|
|
__asyncLoader?: () => Promise<Component>
|
|
|
|
// cache for merged $options
|
|
|
|
__merged?: ComponentOptions
|
|
|
|
|
2019-11-28 17:01:53 +08:00
|
|
|
// type-only differentiator to separate OptionWithoutProps from a constructor
|
2019-12-22 23:58:12 +08:00
|
|
|
// type returned by defineComponent() or FunctionalComponent
|
2019-11-02 05:06:19 +08:00
|
|
|
call?: never
|
2019-11-02 10:54:01 +08:00
|
|
|
// type-only differentiators for built-in Vnode types
|
|
|
|
__isFragment?: never
|
2020-03-31 22:52:42 +08:00
|
|
|
__isTeleport?: never
|
2019-11-02 10:54:01 +08:00
|
|
|
__isSuspense?: never
|
2019-09-06 23:19:22 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export type ComponentOptionsWithoutProps<
|
|
|
|
Props = {},
|
|
|
|
RawBindings = {},
|
|
|
|
D = {},
|
|
|
|
C extends ComputedOptions = {},
|
2020-04-04 00:05:52 +08:00
|
|
|
M extends MethodOptions = {},
|
2020-04-04 08:40:34 +08:00
|
|
|
E extends EmitsOptions = EmitsOptions,
|
2020-04-04 00:05:52 +08:00
|
|
|
EE extends string = string
|
|
|
|
> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
|
2019-09-06 23:19:22 +08:00
|
|
|
props?: undefined
|
2020-04-04 00:05:52 +08:00
|
|
|
} & ThisType<
|
|
|
|
ComponentPublicInstance<{}, RawBindings, D, C, M, E, Readonly<Props>>
|
|
|
|
>
|
2019-09-06 23:19:22 +08:00
|
|
|
|
|
|
|
export type ComponentOptionsWithArrayProps<
|
|
|
|
PropNames extends string = string,
|
|
|
|
RawBindings = {},
|
|
|
|
D = {},
|
|
|
|
C extends ComputedOptions = {},
|
|
|
|
M extends MethodOptions = {},
|
2020-04-04 08:40:34 +08:00
|
|
|
E extends EmitsOptions = EmitsOptions,
|
2020-04-04 00:05:52 +08:00
|
|
|
EE extends string = string,
|
2019-11-10 07:40:25 +08:00
|
|
|
Props = Readonly<{ [key in PropNames]?: any }>
|
2020-04-04 00:05:52 +08:00
|
|
|
> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
|
2019-09-06 23:19:22 +08:00
|
|
|
props: PropNames[]
|
2020-04-04 00:05:52 +08:00
|
|
|
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>
|
2019-09-06 23:19:22 +08:00
|
|
|
|
2019-10-08 21:26:09 +08:00
|
|
|
export type ComponentOptionsWithObjectProps<
|
|
|
|
PropsOptions = ComponentObjectPropsOptions,
|
2019-09-06 23:19:22 +08:00
|
|
|
RawBindings = {},
|
|
|
|
D = {},
|
|
|
|
C extends ComputedOptions = {},
|
|
|
|
M extends MethodOptions = {},
|
2020-04-04 08:40:34 +08:00
|
|
|
E extends EmitsOptions = EmitsOptions,
|
2020-04-04 00:05:52 +08:00
|
|
|
EE extends string = string,
|
2019-11-10 07:40:25 +08:00
|
|
|
Props = Readonly<ExtractPropTypes<PropsOptions>>
|
2020-04-04 00:05:52 +08:00
|
|
|
> = ComponentOptionsBase<Props, RawBindings, D, C, M, E, EE> & {
|
2019-09-06 23:19:22 +08:00
|
|
|
props: PropsOptions
|
2020-04-04 00:05:52 +08:00
|
|
|
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>
|
2019-09-06 23:19:22 +08:00
|
|
|
|
|
|
|
export type ComponentOptions =
|
2020-03-23 23:08:22 +08:00
|
|
|
| ComponentOptionsWithoutProps<any, any, any, any, any>
|
|
|
|
| ComponentOptionsWithObjectProps<any, any, any, any, any>
|
|
|
|
| ComponentOptionsWithArrayProps<any, any, any, any, any>
|
2019-09-04 10:25:38 +08:00
|
|
|
|
2019-10-22 01:57:20 +08:00
|
|
|
export type ComputedOptions = Record<
|
|
|
|
string,
|
|
|
|
ComputedGetter<any> | WritableComputedOptions<any>
|
|
|
|
>
|
2019-09-06 04:09:30 +08:00
|
|
|
|
|
|
|
export interface MethodOptions {
|
|
|
|
[key: string]: Function
|
|
|
|
}
|
|
|
|
|
2019-10-05 22:38:02 +08:00
|
|
|
export type ExtractComputedReturns<T extends any> = {
|
2019-09-06 04:09:30 +08:00
|
|
|
[key in keyof T]: T[key] extends { get: Function }
|
|
|
|
? ReturnType<T[key]['get']>
|
|
|
|
: ReturnType<T[key]>
|
|
|
|
}
|
|
|
|
|
2019-10-25 22:25:52 +08:00
|
|
|
type WatchOptionItem =
|
|
|
|
| string
|
2019-12-31 00:30:12 +08:00
|
|
|
| WatchCallback
|
|
|
|
| { handler: WatchCallback } & WatchOptions
|
2019-10-25 22:25:52 +08:00
|
|
|
|
|
|
|
type ComponentWatchOptionItem = WatchOptionItem | WatchOptionItem[]
|
|
|
|
|
|
|
|
type ComponentWatchOptions = Record<string, ComponentWatchOptionItem>
|
2019-09-06 23:19:22 +08:00
|
|
|
|
|
|
|
type ComponentInjectOptions =
|
|
|
|
| string[]
|
|
|
|
| Record<
|
|
|
|
string | symbol,
|
2019-10-22 23:26:48 +08:00
|
|
|
string | symbol | { from: string | symbol; default?: unknown }
|
2019-09-06 23:19:22 +08:00
|
|
|
>
|
|
|
|
|
2019-09-06 04:09:30 +08:00
|
|
|
export interface LegacyOptions<
|
|
|
|
Props,
|
|
|
|
D,
|
|
|
|
C extends ComputedOptions,
|
2019-09-06 06:48:49 +08:00
|
|
|
M extends MethodOptions
|
2019-09-06 04:09:30 +08:00
|
|
|
> {
|
2020-03-24 23:59:00 +08:00
|
|
|
// allow any custom options
|
|
|
|
[key: string]: any
|
2019-09-04 10:25:38 +08:00
|
|
|
|
|
|
|
// state
|
2019-09-06 23:19:22 +08:00
|
|
|
// Limitation: we cannot expose RawBindings on the `this` context for data
|
|
|
|
// since that leads to some sort of circular inference and breaks ThisType
|
|
|
|
// for the entire component.
|
2020-03-23 23:08:22 +08:00
|
|
|
data?: (
|
|
|
|
this: ComponentPublicInstance<Props>,
|
|
|
|
vm: ComponentPublicInstance<Props>
|
|
|
|
) => D
|
2019-09-06 06:48:49 +08:00
|
|
|
computed?: C
|
|
|
|
methods?: M
|
2019-09-06 23:19:22 +08:00
|
|
|
watch?: ComponentWatchOptions
|
2019-09-06 06:48:49 +08:00
|
|
|
provide?: Data | Function
|
2019-09-06 23:19:22 +08:00
|
|
|
inject?: ComponentInjectOptions
|
2019-09-04 10:25:38 +08:00
|
|
|
|
|
|
|
// composition
|
2020-03-23 23:08:22 +08:00
|
|
|
mixins?: ComponentOptions[]
|
|
|
|
extends?: ComponentOptions
|
2019-09-04 10:25:38 +08:00
|
|
|
|
|
|
|
// lifecycle
|
2019-09-06 06:48:49 +08:00
|
|
|
beforeCreate?(): void
|
|
|
|
created?(): void
|
2019-09-04 10:25:38 +08:00
|
|
|
beforeMount?(): void
|
|
|
|
mounted?(): void
|
|
|
|
beforeUpdate?(): void
|
|
|
|
updated?(): void
|
|
|
|
activated?(): void
|
2019-10-05 22:48:54 +08:00
|
|
|
deactivated?(): void
|
2019-09-05 22:07:43 +08:00
|
|
|
beforeUnmount?(): void
|
|
|
|
unmounted?(): void
|
2019-10-15 11:15:09 +08:00
|
|
|
renderTracked?: DebuggerHook
|
|
|
|
renderTriggered?: DebuggerHook
|
|
|
|
errorCaptured?: ErrorCapturedHook
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
|
2019-10-22 11:47:16 +08:00
|
|
|
const enum OptionTypes {
|
|
|
|
PROPS = 'Props',
|
|
|
|
DATA = 'Data',
|
|
|
|
COMPUTED = 'Computed',
|
|
|
|
METHODS = 'Methods',
|
|
|
|
INJECT = 'Inject'
|
|
|
|
}
|
|
|
|
|
|
|
|
function createDuplicateChecker() {
|
|
|
|
const cache = Object.create(null)
|
|
|
|
return (type: OptionTypes, key: string) => {
|
|
|
|
if (cache[key]) {
|
|
|
|
warn(`${type} property "${key}" is already defined in ${cache[key]}.`)
|
|
|
|
} else {
|
|
|
|
cache[key] = type
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-04 23:36:27 +08:00
|
|
|
export function applyOptions(
|
2019-09-07 00:58:31 +08:00
|
|
|
instance: ComponentInternalInstance,
|
2019-09-04 23:36:27 +08:00
|
|
|
options: ComponentOptions,
|
|
|
|
asMixin: boolean = false
|
|
|
|
) {
|
2020-04-17 00:49:50 +08:00
|
|
|
const publicThis = instance.proxy!
|
2019-09-04 10:25:38 +08:00
|
|
|
const {
|
2019-09-04 23:36:27 +08:00
|
|
|
// composition
|
|
|
|
mixins,
|
|
|
|
extends: extendsOptions,
|
|
|
|
// state
|
2019-10-22 11:47:16 +08:00
|
|
|
props: propsOptions,
|
2019-09-04 10:25:38 +08:00
|
|
|
data: dataOptions,
|
|
|
|
computed: computedOptions,
|
|
|
|
methods,
|
|
|
|
watch: watchOptions,
|
|
|
|
provide: provideOptions,
|
|
|
|
inject: injectOptions,
|
2019-09-04 23:36:27 +08:00
|
|
|
// assets
|
|
|
|
components,
|
|
|
|
directives,
|
|
|
|
// lifecycle
|
2019-09-04 10:25:38 +08:00
|
|
|
beforeMount,
|
|
|
|
mounted,
|
|
|
|
beforeUpdate,
|
|
|
|
updated,
|
2019-10-30 10:28:38 +08:00
|
|
|
activated,
|
|
|
|
deactivated,
|
2019-09-05 22:07:43 +08:00
|
|
|
beforeUnmount,
|
|
|
|
unmounted,
|
2019-09-04 10:25:38 +08:00
|
|
|
renderTracked,
|
|
|
|
renderTriggered,
|
|
|
|
errorCaptured
|
2019-09-04 23:36:27 +08:00
|
|
|
} = options
|
|
|
|
|
2020-04-17 00:49:50 +08:00
|
|
|
const ctx = instance.ctx
|
2019-09-05 22:07:43 +08:00
|
|
|
const globalMixins = instance.appContext.mixins
|
2019-10-22 11:47:16 +08:00
|
|
|
// call it only during dev
|
2020-04-06 06:39:22 +08:00
|
|
|
|
2019-09-06 08:59:45 +08:00
|
|
|
// applyOptions is called non-as-mixin once per instance
|
2019-09-05 22:07:43 +08:00
|
|
|
if (!asMixin) {
|
2020-04-17 00:49:50 +08:00
|
|
|
callSyncHook('beforeCreate', options, publicThis, globalMixins)
|
2019-09-06 08:59:45 +08:00
|
|
|
// global mixins are applied first
|
2019-09-05 22:07:43 +08:00
|
|
|
applyMixins(instance, globalMixins)
|
2019-09-04 23:36:27 +08:00
|
|
|
}
|
|
|
|
// extending a base component...
|
|
|
|
if (extendsOptions) {
|
|
|
|
applyOptions(instance, extendsOptions, true)
|
|
|
|
}
|
|
|
|
// local mixins
|
|
|
|
if (mixins) {
|
|
|
|
applyMixins(instance, mixins)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
|
2020-04-06 06:39:22 +08:00
|
|
|
const checkDuplicateProperties = __DEV__ ? createDuplicateChecker() : null
|
|
|
|
|
2019-10-22 11:47:16 +08:00
|
|
|
if (__DEV__ && propsOptions) {
|
2020-04-06 06:39:22 +08:00
|
|
|
for (const key in normalizePropsOptions(propsOptions)[0]) {
|
2019-10-22 11:47:16 +08:00
|
|
|
checkDuplicateProperties!(OptionTypes.PROPS, key)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-04 23:36:27 +08:00
|
|
|
// state options
|
2019-09-04 10:25:38 +08:00
|
|
|
if (dataOptions) {
|
2020-03-13 04:13:12 +08:00
|
|
|
if (__DEV__ && !isFunction(dataOptions)) {
|
|
|
|
warn(
|
|
|
|
`The data option must be a function. ` +
|
|
|
|
`Plain object usage is no longer supported.`
|
|
|
|
)
|
|
|
|
}
|
2020-04-17 00:49:50 +08:00
|
|
|
const data = dataOptions.call(publicThis, publicThis)
|
2020-04-15 05:40:41 +08:00
|
|
|
if (__DEV__ && isPromise(data)) {
|
|
|
|
warn(
|
|
|
|
`data() returned a Promise - note data() cannot be async; If you ` +
|
|
|
|
`intend to perform data fetching before component renders, use ` +
|
|
|
|
`async setup() + <Suspense>.`
|
|
|
|
)
|
|
|
|
}
|
2019-10-02 22:03:43 +08:00
|
|
|
if (!isObject(data)) {
|
|
|
|
__DEV__ && warn(`data() should return an object.`)
|
|
|
|
} else if (instance.data === EMPTY_OBJ) {
|
2019-10-22 11:47:16 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
for (const key in data) {
|
|
|
|
checkDuplicateProperties!(OptionTypes.DATA, key)
|
2020-04-17 00:49:50 +08:00
|
|
|
// expose data on ctx during dev
|
|
|
|
Object.defineProperty(ctx, key, {
|
|
|
|
configurable: true,
|
|
|
|
enumerable: true,
|
|
|
|
get: () => data[key],
|
|
|
|
set: NOOP
|
|
|
|
})
|
2019-10-22 11:47:16 +08:00
|
|
|
}
|
|
|
|
}
|
2020-01-28 04:15:22 +08:00
|
|
|
instance.data = reactive(data)
|
2019-10-02 22:03:43 +08:00
|
|
|
} else {
|
|
|
|
// existing data: this is a mixin or extends.
|
|
|
|
extend(instance.data, data)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
2020-01-28 04:15:22 +08:00
|
|
|
|
2019-09-04 10:25:38 +08:00
|
|
|
if (computedOptions) {
|
|
|
|
for (const key in computedOptions) {
|
2019-09-06 04:09:30 +08:00
|
|
|
const opt = (computedOptions as ComputedOptions)[key]
|
2020-04-17 00:49:50 +08:00
|
|
|
const get = isFunction(opt)
|
|
|
|
? opt.bind(publicThis, publicThis)
|
|
|
|
: isFunction(opt.get)
|
|
|
|
? opt.get.bind(publicThis, publicThis)
|
|
|
|
: NOOP
|
|
|
|
if (__DEV__ && get === NOOP) {
|
|
|
|
warn(`Computed property "${key}" has no getter.`)
|
2019-10-14 14:15:31 +08:00
|
|
|
}
|
2020-04-17 00:49:50 +08:00
|
|
|
const set =
|
|
|
|
!isFunction(opt) && isFunction(opt.set)
|
|
|
|
? opt.set.bind(publicThis)
|
|
|
|
: __DEV__
|
|
|
|
? () => {
|
|
|
|
warn(
|
|
|
|
`Write operation failed: computed property "${key}" is readonly.`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
: NOOP
|
|
|
|
const c = computed({
|
|
|
|
get,
|
|
|
|
set
|
|
|
|
})
|
|
|
|
Object.defineProperty(ctx, key, {
|
|
|
|
enumerable: true,
|
|
|
|
configurable: true,
|
|
|
|
get: () => c.value,
|
|
|
|
set: v => (c.value = v)
|
|
|
|
})
|
2020-04-06 06:39:22 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
checkDuplicateProperties!(OptionTypes.COMPUTED, key)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
}
|
2019-10-22 11:47:16 +08:00
|
|
|
|
2019-09-04 10:25:38 +08:00
|
|
|
if (methods) {
|
|
|
|
for (const key in methods) {
|
2019-10-22 11:47:16 +08:00
|
|
|
const methodHandler = (methods as MethodOptions)[key]
|
|
|
|
if (isFunction(methodHandler)) {
|
2020-04-17 00:49:50 +08:00
|
|
|
ctx[key] = methodHandler.bind(publicThis)
|
2020-04-06 06:39:22 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
checkDuplicateProperties!(OptionTypes.METHODS, key)
|
|
|
|
}
|
2019-10-22 11:47:16 +08:00
|
|
|
} else if (__DEV__) {
|
|
|
|
warn(
|
|
|
|
`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
|
|
|
|
`Did you reference the function correctly?`
|
|
|
|
)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
}
|
2020-01-28 04:15:22 +08:00
|
|
|
|
2019-09-04 10:25:38 +08:00
|
|
|
if (watchOptions) {
|
|
|
|
for (const key in watchOptions) {
|
2020-04-17 00:49:50 +08:00
|
|
|
createWatcher(watchOptions[key], ctx, publicThis, key)
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
}
|
2020-01-28 04:15:22 +08:00
|
|
|
|
2019-09-04 10:25:38 +08:00
|
|
|
if (provideOptions) {
|
|
|
|
const provides = isFunction(provideOptions)
|
2020-04-17 00:49:50 +08:00
|
|
|
? provideOptions.call(publicThis)
|
2019-09-04 10:25:38 +08:00
|
|
|
: provideOptions
|
|
|
|
for (const key in provides) {
|
|
|
|
provide(key, provides[key])
|
|
|
|
}
|
|
|
|
}
|
2020-01-28 04:15:22 +08:00
|
|
|
|
2019-09-04 10:25:38 +08:00
|
|
|
if (injectOptions) {
|
|
|
|
if (isArray(injectOptions)) {
|
|
|
|
for (let i = 0; i < injectOptions.length; i++) {
|
|
|
|
const key = injectOptions[i]
|
2020-04-17 00:49:50 +08:00
|
|
|
ctx[key] = inject(key)
|
2020-04-06 06:39:22 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
checkDuplicateProperties!(OptionTypes.INJECT, key)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
for (const key in injectOptions) {
|
|
|
|
const opt = injectOptions[key]
|
|
|
|
if (isObject(opt)) {
|
2020-04-17 00:49:50 +08:00
|
|
|
ctx[key] = inject(opt.from, opt.default)
|
2019-09-04 10:25:38 +08:00
|
|
|
} else {
|
2020-04-17 00:49:50 +08:00
|
|
|
ctx[key] = inject(opt)
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
2020-04-06 06:39:22 +08:00
|
|
|
if (__DEV__) {
|
|
|
|
checkDuplicateProperties!(OptionTypes.INJECT, key)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-04 23:36:27 +08:00
|
|
|
// asset options
|
|
|
|
if (components) {
|
|
|
|
extend(instance.components, components)
|
|
|
|
}
|
|
|
|
if (directives) {
|
|
|
|
extend(instance.directives, directives)
|
|
|
|
}
|
|
|
|
|
|
|
|
// lifecycle options
|
2019-09-05 22:07:43 +08:00
|
|
|
if (!asMixin) {
|
2020-04-17 00:49:50 +08:00
|
|
|
callSyncHook('created', options, publicThis, globalMixins)
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (beforeMount) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onBeforeMount(beforeMount.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (mounted) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onMounted(mounted.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (beforeUpdate) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onBeforeUpdate(beforeUpdate.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (updated) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onUpdated(updated.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
2019-10-30 10:28:38 +08:00
|
|
|
if (activated) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onActivated(activated.bind(publicThis))
|
2019-10-30 10:28:38 +08:00
|
|
|
}
|
|
|
|
if (deactivated) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onDeactivated(deactivated.bind(publicThis))
|
2019-10-30 10:28:38 +08:00
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
if (errorCaptured) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onErrorCaptured(errorCaptured.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (renderTracked) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onRenderTracked(renderTracked.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
if (renderTriggered) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onRenderTriggered(renderTriggered.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
2019-09-05 22:07:43 +08:00
|
|
|
if (beforeUnmount) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onBeforeUnmount(beforeUnmount.bind(publicThis))
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
2019-09-05 22:07:43 +08:00
|
|
|
if (unmounted) {
|
2020-04-17 00:49:50 +08:00
|
|
|
onUnmounted(unmounted.bind(publicThis))
|
2019-09-05 22:07:43 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function callSyncHook(
|
|
|
|
name: 'beforeCreate' | 'created',
|
|
|
|
options: ComponentOptions,
|
2019-10-22 11:37:03 +08:00
|
|
|
ctx: ComponentPublicInstance,
|
2019-09-05 22:07:43 +08:00
|
|
|
globalMixins: ComponentOptions[]
|
|
|
|
) {
|
|
|
|
callHookFromMixins(name, globalMixins, ctx)
|
|
|
|
const baseHook = options.extends && options.extends[name]
|
|
|
|
if (baseHook) {
|
|
|
|
baseHook.call(ctx)
|
|
|
|
}
|
|
|
|
const mixins = options.mixins
|
|
|
|
if (mixins) {
|
|
|
|
callHookFromMixins(name, mixins, ctx)
|
|
|
|
}
|
|
|
|
const selfHook = options[name]
|
|
|
|
if (selfHook) {
|
|
|
|
selfHook.call(ctx)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function callHookFromMixins(
|
|
|
|
name: 'beforeCreate' | 'created',
|
|
|
|
mixins: ComponentOptions[],
|
2019-10-22 11:37:03 +08:00
|
|
|
ctx: ComponentPublicInstance
|
2019-09-05 22:07:43 +08:00
|
|
|
) {
|
|
|
|
for (let i = 0; i < mixins.length; i++) {
|
|
|
|
const fn = mixins[i][name]
|
|
|
|
if (fn) {
|
|
|
|
fn.call(ctx)
|
|
|
|
}
|
2019-09-04 10:25:38 +08:00
|
|
|
}
|
|
|
|
}
|
2019-09-04 11:04:11 +08:00
|
|
|
|
2019-09-07 00:58:31 +08:00
|
|
|
function applyMixins(
|
|
|
|
instance: ComponentInternalInstance,
|
|
|
|
mixins: ComponentOptions[]
|
|
|
|
) {
|
2019-09-04 23:36:27 +08:00
|
|
|
for (let i = 0; i < mixins.length; i++) {
|
|
|
|
applyOptions(instance, mixins[i], true)
|
|
|
|
}
|
|
|
|
}
|
2019-10-25 22:25:52 +08:00
|
|
|
|
|
|
|
function createWatcher(
|
|
|
|
raw: ComponentWatchOptionItem,
|
2020-04-17 00:49:50 +08:00
|
|
|
ctx: Data,
|
|
|
|
publicThis: ComponentPublicInstance,
|
2019-10-25 22:25:52 +08:00
|
|
|
key: string
|
|
|
|
) {
|
2020-04-17 00:49:50 +08:00
|
|
|
const getter = () => (publicThis as Data)[key]
|
2019-10-25 22:25:52 +08:00
|
|
|
if (isString(raw)) {
|
2020-04-17 00:49:50 +08:00
|
|
|
const handler = ctx[raw]
|
2019-10-25 22:25:52 +08:00
|
|
|
if (isFunction(handler)) {
|
2019-12-31 00:30:12 +08:00
|
|
|
watch(getter, handler as WatchCallback)
|
2019-10-25 22:25:52 +08:00
|
|
|
} else if (__DEV__) {
|
|
|
|
warn(`Invalid watch handler specified by key "${raw}"`, handler)
|
|
|
|
}
|
|
|
|
} else if (isFunction(raw)) {
|
2020-04-17 00:49:50 +08:00
|
|
|
watch(getter, raw.bind(publicThis))
|
2019-10-25 22:25:52 +08:00
|
|
|
} else if (isObject(raw)) {
|
|
|
|
if (isArray(raw)) {
|
2020-04-17 00:49:50 +08:00
|
|
|
raw.forEach(r => createWatcher(r, ctx, publicThis, key))
|
2019-10-25 22:25:52 +08:00
|
|
|
} else {
|
2020-04-17 00:49:50 +08:00
|
|
|
watch(getter, raw.handler.bind(publicThis), raw)
|
2019-10-25 22:25:52 +08:00
|
|
|
}
|
|
|
|
} else if (__DEV__) {
|
|
|
|
warn(`Invalid watch option: "${key}"`)
|
|
|
|
}
|
|
|
|
}
|
2020-03-24 23:59:00 +08:00
|
|
|
|
|
|
|
export function resolveMergedOptions(
|
|
|
|
instance: ComponentInternalInstance
|
|
|
|
): ComponentOptions {
|
|
|
|
const raw = instance.type as ComponentOptions
|
|
|
|
const { __merged, mixins, extends: extendsOptions } = raw
|
|
|
|
if (__merged) return __merged
|
|
|
|
const globalMixins = instance.appContext.mixins
|
2020-03-25 00:59:33 +08:00
|
|
|
if (!globalMixins.length && !mixins && !extendsOptions) return raw
|
2020-03-24 23:59:00 +08:00
|
|
|
const options = {}
|
2020-03-25 00:59:33 +08:00
|
|
|
globalMixins.forEach(m => mergeOptions(options, m, instance))
|
2020-03-24 23:59:00 +08:00
|
|
|
extendsOptions && mergeOptions(options, extendsOptions, instance)
|
|
|
|
mixins && mixins.forEach(m => mergeOptions(options, m, instance))
|
|
|
|
mergeOptions(options, raw, instance)
|
|
|
|
return (raw.__merged = options)
|
|
|
|
}
|
|
|
|
|
|
|
|
function mergeOptions(to: any, from: any, instance: ComponentInternalInstance) {
|
|
|
|
const strats = instance.appContext.config.optionMergeStrategies
|
|
|
|
for (const key in from) {
|
|
|
|
const strat = strats && strats[key]
|
|
|
|
if (strat) {
|
|
|
|
to[key] = strat(to[key], from[key], instance.proxy, key)
|
|
|
|
} else if (!hasOwn(to, key)) {
|
|
|
|
to[key] = from[key]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|