2018-09-19 23:35:38 +08:00
|
|
|
import { VNodeFlags } from './flags'
|
2018-10-26 23:47:04 +08:00
|
|
|
import { EMPTY_OBJ, isArray, isObject } from '@vue/shared'
|
2018-09-20 11:19:25 +08:00
|
|
|
import { h } from './h'
|
2018-10-03 01:59:11 +08:00
|
|
|
import { VNode, MountedVNode, createFragment } from './vdom'
|
2018-10-12 05:14:39 +08:00
|
|
|
import {
|
|
|
|
Component,
|
|
|
|
ComponentInstance,
|
|
|
|
ComponentClass,
|
|
|
|
FunctionalComponent
|
|
|
|
} from './component'
|
2018-09-19 23:35:38 +08:00
|
|
|
import { createTextVNode, cloneVNode } from './vdom'
|
|
|
|
import { initializeState } from './componentState'
|
2018-10-12 05:14:39 +08:00
|
|
|
import { initializeProps, resolveProps } from './componentProps'
|
2018-10-17 00:37:31 +08:00
|
|
|
import { initializeComputed, teardownComputed } from './componentComputed'
|
2018-09-19 23:35:38 +08:00
|
|
|
import { initializeWatch, teardownWatch } from './componentWatch'
|
2018-10-17 03:47:51 +08:00
|
|
|
import {
|
|
|
|
ComponentOptions,
|
|
|
|
resolveComponentOptionsFromClass
|
|
|
|
} from './componentOptions'
|
2018-09-19 23:35:38 +08:00
|
|
|
import { createRenderProxy } from './componentProxy'
|
2018-09-24 08:30:26 +08:00
|
|
|
import { handleError, ErrorTypes } from './errorHandling'
|
2018-10-12 05:21:13 +08:00
|
|
|
import { warn } from './warning'
|
2018-09-19 23:35:38 +08:00
|
|
|
|
2018-10-12 01:54:35 +08:00
|
|
|
let currentVNode: VNode | null = null
|
2018-10-16 00:41:18 +08:00
|
|
|
let currentContextVNode: VNode | null = null
|
2018-10-12 01:54:35 +08:00
|
|
|
|
2018-10-18 04:37:45 +08:00
|
|
|
export function createComponentInstance<T extends Component>(
|
|
|
|
vnode: VNode
|
2018-10-09 23:37:24 +08:00
|
|
|
): ComponentInstance {
|
2018-10-12 01:54:35 +08:00
|
|
|
// component instance creation is done in two steps.
|
|
|
|
// first, `initializeComponentInstance` is called inside base component
|
2018-10-12 02:24:55 +08:00
|
|
|
// constructor as the instance is created so that the extended component's
|
|
|
|
// constructor has access to certain properties and most importantly,
|
|
|
|
// this.$props.
|
|
|
|
// we are storing the vnodes in variables here so that there's no need to
|
|
|
|
// always pass args in super()
|
2018-10-12 01:54:35 +08:00
|
|
|
currentVNode = vnode
|
2018-10-16 00:41:18 +08:00
|
|
|
currentContextVNode = vnode.contextVNode
|
2018-10-18 04:37:45 +08:00
|
|
|
const Component = vnode.tag as ComponentClass
|
2018-10-14 09:13:56 +08:00
|
|
|
const instance = (vnode.children = new Component() as ComponentInstance)
|
2018-10-17 07:10:08 +08:00
|
|
|
|
2018-10-12 01:54:35 +08:00
|
|
|
// then we finish the initialization by collecting properties set on the
|
|
|
|
// instance
|
2018-10-17 07:10:08 +08:00
|
|
|
const {
|
|
|
|
$proxy,
|
|
|
|
$options: { created, computed, watch }
|
|
|
|
} = instance
|
2018-10-27 00:11:52 +08:00
|
|
|
initializeState(instance, !Component.fromOptions)
|
2018-10-17 07:10:08 +08:00
|
|
|
initializeComputed(instance, computed)
|
|
|
|
initializeWatch(instance, watch)
|
2018-10-12 01:54:35 +08:00
|
|
|
instance.$slots = currentVNode.slots || EMPTY_OBJ
|
2018-10-17 07:10:08 +08:00
|
|
|
|
|
|
|
if (created) {
|
|
|
|
created.call($proxy)
|
2018-10-12 01:54:35 +08:00
|
|
|
}
|
2018-10-17 07:10:08 +08:00
|
|
|
|
2018-10-12 01:54:35 +08:00
|
|
|
currentVNode = currentContextVNode = null
|
|
|
|
return instance
|
|
|
|
}
|
|
|
|
|
|
|
|
// this is called inside the base component's constructor
|
|
|
|
// it initializes all the way up to props so that they are available
|
|
|
|
// inside the extended component's constructor
|
|
|
|
export function initializeComponentInstance(instance: ComponentInstance) {
|
|
|
|
if (__DEV__ && currentVNode === null) {
|
|
|
|
throw new Error(
|
|
|
|
`Component classes are not meant to be manually instantiated.`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2018-10-17 03:47:51 +08:00
|
|
|
instance.$options = resolveComponentOptionsFromClass(instance.constructor)
|
2018-10-12 01:54:35 +08:00
|
|
|
instance.$parentVNode = currentVNode as MountedVNode
|
2018-09-19 23:35:38 +08:00
|
|
|
|
|
|
|
// renderProxy
|
|
|
|
const proxy = (instance.$proxy = createRenderProxy(instance))
|
|
|
|
|
2018-10-12 01:54:35 +08:00
|
|
|
// parent chain management
|
|
|
|
if (currentContextVNode !== null) {
|
2018-10-11 01:13:27 +08:00
|
|
|
// locate first non-functional parent
|
2018-10-29 00:08:20 +08:00
|
|
|
while (currentContextVNode !== null) {
|
|
|
|
if ((currentContextVNode.flags & VNodeFlags.COMPONENT_STATEFUL) > 0) {
|
|
|
|
const parentComponent = (currentContextVNode as VNode)
|
|
|
|
.children as ComponentInstance
|
|
|
|
instance.$parent = parentComponent.$proxy
|
|
|
|
instance.$root = parentComponent.$root
|
|
|
|
parentComponent.$children.push(proxy)
|
|
|
|
break
|
|
|
|
}
|
|
|
|
currentContextVNode = currentContextVNode.contextVNode
|
2018-10-11 01:13:27 +08:00
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
} else {
|
|
|
|
instance.$root = proxy
|
|
|
|
}
|
|
|
|
|
2018-10-12 01:54:35 +08:00
|
|
|
// beforeCreate hook is called right in the constructor
|
2018-10-17 07:10:08 +08:00
|
|
|
const { beforeCreate, props } = instance.$options
|
|
|
|
if (beforeCreate) {
|
|
|
|
beforeCreate.call(proxy)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
2018-10-17 07:10:08 +08:00
|
|
|
initializeProps(instance, props, (currentVNode as VNode).data)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
|
2018-10-09 23:37:24 +08:00
|
|
|
export function renderInstanceRoot(instance: ComponentInstance): VNode {
|
2018-09-24 08:30:26 +08:00
|
|
|
let vnode
|
|
|
|
try {
|
2018-10-27 00:11:52 +08:00
|
|
|
vnode = instance.render.call(
|
2018-10-10 09:10:30 +08:00
|
|
|
instance.$proxy,
|
|
|
|
instance.$props,
|
|
|
|
instance.$slots,
|
2018-10-16 01:12:13 +08:00
|
|
|
instance.$attrs,
|
|
|
|
instance.$parentVNode
|
2018-10-10 09:10:30 +08:00
|
|
|
)
|
2018-10-12 05:14:39 +08:00
|
|
|
} catch (err) {
|
|
|
|
handleError(err, instance, ErrorTypes.RENDER)
|
2018-09-24 08:30:26 +08:00
|
|
|
}
|
2018-10-10 09:10:30 +08:00
|
|
|
return normalizeComponentRoot(vnode, instance.$parentVNode)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
|
2018-10-12 05:14:39 +08:00
|
|
|
export function renderFunctionalRoot(vnode: VNode): VNode {
|
|
|
|
const render = vnode.tag as FunctionalComponent
|
2018-10-27 05:49:40 +08:00
|
|
|
const [props, attrs] = resolveProps(vnode.data, render.props)
|
2018-10-12 05:14:39 +08:00
|
|
|
let subTree
|
|
|
|
try {
|
2018-10-27 05:49:40 +08:00
|
|
|
subTree = render(props, vnode.slots || EMPTY_OBJ, attrs, vnode)
|
2018-10-12 05:14:39 +08:00
|
|
|
} catch (err) {
|
|
|
|
handleError(err, vnode, ErrorTypes.RENDER)
|
|
|
|
}
|
|
|
|
return normalizeComponentRoot(subTree, vnode)
|
|
|
|
}
|
|
|
|
|
2018-10-09 23:37:24 +08:00
|
|
|
export function teardownComponentInstance(instance: ComponentInstance) {
|
2018-09-27 05:10:34 +08:00
|
|
|
if (instance._unmounted) {
|
|
|
|
return
|
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
const parentComponent = instance.$parent && instance.$parent._self
|
2018-09-27 05:10:34 +08:00
|
|
|
if (parentComponent && !parentComponent._unmounted) {
|
2018-09-19 23:35:38 +08:00
|
|
|
parentComponent.$children.splice(
|
|
|
|
parentComponent.$children.indexOf(instance.$proxy),
|
|
|
|
1
|
|
|
|
)
|
|
|
|
}
|
|
|
|
teardownComputed(instance)
|
|
|
|
teardownWatch(instance)
|
|
|
|
}
|
|
|
|
|
2018-10-12 05:14:39 +08:00
|
|
|
function normalizeComponentRoot(
|
2018-09-19 23:35:38 +08:00
|
|
|
vnode: any,
|
2018-10-10 09:10:30 +08:00
|
|
|
componentVNode: VNode | null
|
2018-09-19 23:35:38 +08:00
|
|
|
): VNode {
|
|
|
|
if (vnode == null) {
|
|
|
|
vnode = createTextVNode('')
|
2018-10-17 03:47:51 +08:00
|
|
|
} else if (!isObject(vnode)) {
|
2018-09-19 23:35:38 +08:00
|
|
|
vnode = createTextVNode(vnode + '')
|
2018-10-17 03:47:51 +08:00
|
|
|
} else if (isArray(vnode)) {
|
2018-09-26 05:49:47 +08:00
|
|
|
if (vnode.length === 1) {
|
2018-10-10 09:10:30 +08:00
|
|
|
vnode = normalizeComponentRoot(vnode[0], componentVNode)
|
2018-09-26 05:49:47 +08:00
|
|
|
} else {
|
|
|
|
vnode = createFragment(vnode)
|
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
} else {
|
2018-09-27 05:10:34 +08:00
|
|
|
const { el, flags } = vnode
|
2018-09-19 23:35:38 +08:00
|
|
|
if (
|
|
|
|
componentVNode &&
|
|
|
|
(flags & VNodeFlags.COMPONENT || flags & VNodeFlags.ELEMENT)
|
|
|
|
) {
|
2018-10-10 09:10:30 +08:00
|
|
|
if (el) {
|
2018-10-17 03:47:51 +08:00
|
|
|
vnode = cloneVNode(vnode as VNode)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
if (flags & VNodeFlags.COMPONENT) {
|
|
|
|
vnode.parentVNode = componentVNode
|
|
|
|
}
|
2018-09-27 05:10:34 +08:00
|
|
|
} else if (el) {
|
2018-10-17 03:47:51 +08:00
|
|
|
vnode = cloneVNode(vnode as VNode)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
return vnode
|
|
|
|
}
|
|
|
|
|
|
|
|
export function shouldUpdateFunctionalComponent(
|
2018-10-09 23:37:24 +08:00
|
|
|
prevProps: Record<string, any> | null,
|
|
|
|
nextProps: Record<string, any> | null
|
2018-09-19 23:35:38 +08:00
|
|
|
): boolean {
|
|
|
|
if (prevProps === nextProps) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (prevProps === null) {
|
|
|
|
return nextProps !== null
|
|
|
|
}
|
|
|
|
if (nextProps === null) {
|
|
|
|
return prevProps !== null
|
|
|
|
}
|
|
|
|
let shouldUpdate = true
|
|
|
|
const nextKeys = Object.keys(nextProps)
|
|
|
|
if (nextKeys.length === Object.keys(prevProps).length) {
|
|
|
|
shouldUpdate = false
|
|
|
|
for (let i = 0; i < nextKeys.length; i++) {
|
|
|
|
const key = nextKeys[i]
|
|
|
|
if (nextProps[key] !== prevProps[key]) {
|
|
|
|
shouldUpdate = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return shouldUpdate
|
|
|
|
}
|
|
|
|
|
|
|
|
export function createComponentClassFromOptions(
|
|
|
|
options: ComponentOptions
|
|
|
|
): ComponentClass {
|
2018-10-09 23:37:24 +08:00
|
|
|
class AnonymousComponent extends Component {
|
2018-10-10 08:22:29 +08:00
|
|
|
static options = options
|
2018-10-27 00:11:52 +08:00
|
|
|
// indicate this component was created from options
|
|
|
|
static fromOptions = true
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
2018-10-09 23:37:24 +08:00
|
|
|
const proto = AnonymousComponent.prototype as any
|
2018-09-19 23:35:38 +08:00
|
|
|
for (const key in options) {
|
|
|
|
const value = options[key]
|
2018-10-26 23:47:04 +08:00
|
|
|
if (key === 'render') {
|
2018-10-10 08:22:29 +08:00
|
|
|
if (__COMPAT__) {
|
2018-10-26 23:47:04 +08:00
|
|
|
options.render = function() {
|
|
|
|
return value.call(this, h)
|
2018-10-09 23:37:24 +08:00
|
|
|
}
|
|
|
|
}
|
2018-10-26 23:47:04 +08:00
|
|
|
// so that we can call instance.render directly
|
|
|
|
proto.render = options.render
|
2018-10-10 08:22:29 +08:00
|
|
|
} else if (key === 'computed') {
|
2018-10-26 23:47:04 +08:00
|
|
|
// create computed setters on prototype
|
|
|
|
// (getters are handled by the render proxy)
|
2018-10-10 08:22:29 +08:00
|
|
|
for (const computedKey in value) {
|
|
|
|
const computed = value[computedKey]
|
2018-10-26 23:47:04 +08:00
|
|
|
const set = isObject(computed) && computed.set
|
|
|
|
if (set) {
|
|
|
|
Object.defineProperty(proto, computedKey, {
|
|
|
|
configurable: true,
|
|
|
|
set
|
|
|
|
})
|
|
|
|
}
|
2018-10-10 08:22:29 +08:00
|
|
|
}
|
|
|
|
} else if (key === 'methods') {
|
2018-09-20 11:43:27 +08:00
|
|
|
for (const method in value) {
|
2018-10-09 23:37:24 +08:00
|
|
|
if (__DEV__ && proto.hasOwnProperty(method)) {
|
2018-10-12 05:21:13 +08:00
|
|
|
warn(
|
2018-10-09 23:37:24 +08:00
|
|
|
`Object syntax contains method name that conflicts with ` +
|
|
|
|
`lifecycle hook: "${method}"`
|
|
|
|
)
|
|
|
|
}
|
|
|
|
proto[method] = value[method]
|
2018-09-20 11:43:27 +08:00
|
|
|
}
|
2018-10-26 23:47:04 +08:00
|
|
|
} else if (__COMPAT__) {
|
|
|
|
if (key === 'name') {
|
|
|
|
options.displayName = value
|
|
|
|
} else if (key === 'render') {
|
|
|
|
options.render = function() {
|
|
|
|
return value.call(this, h)
|
|
|
|
}
|
|
|
|
} else if (key === 'beforeDestroy') {
|
|
|
|
options.beforeUnmount = value
|
|
|
|
} else if (key === 'destroyed') {
|
|
|
|
options.unmounted = value
|
|
|
|
}
|
2018-09-20 11:43:27 +08:00
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
2018-10-09 23:37:24 +08:00
|
|
|
return AnonymousComponent as ComponentClass
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|