2019-09-07 00:58:31 +08:00
|
|
|
import {
|
|
|
|
ComponentInternalInstance,
|
|
|
|
FunctionalComponent,
|
|
|
|
Data
|
|
|
|
} from './component'
|
2019-09-25 02:37:14 +08:00
|
|
|
import { VNode, normalizeVNode, createVNode, Comment } from './vnode'
|
2019-09-06 23:25:11 +08:00
|
|
|
import { ShapeFlags } from './shapeFlags'
|
2019-09-07 00:58:31 +08:00
|
|
|
import { handleError, ErrorCodes } from './errorHandling'
|
2019-10-01 09:17:12 +08:00
|
|
|
import { PatchFlags } from '@vue/shared'
|
2019-09-06 23:25:11 +08:00
|
|
|
|
|
|
|
// mark the current rendering instance for asset resolution (e.g.
|
|
|
|
// resolveComponent, resolveDirective) during render
|
2019-09-07 00:58:31 +08:00
|
|
|
export let currentRenderingInstance: ComponentInternalInstance | null = null
|
2019-09-06 23:25:11 +08:00
|
|
|
|
2019-09-07 00:58:31 +08:00
|
|
|
export function renderComponentRoot(
|
|
|
|
instance: ComponentInternalInstance
|
|
|
|
): VNode {
|
2019-09-06 23:25:11 +08:00
|
|
|
const {
|
|
|
|
type: Component,
|
|
|
|
vnode,
|
|
|
|
renderProxy,
|
|
|
|
props,
|
|
|
|
slots,
|
|
|
|
attrs,
|
|
|
|
emit
|
|
|
|
} = instance
|
|
|
|
|
|
|
|
let result
|
|
|
|
currentRenderingInstance = instance
|
|
|
|
try {
|
|
|
|
if (vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
|
2019-10-05 22:09:34 +08:00
|
|
|
result = normalizeVNode(instance.render!.call(renderProxy))
|
2019-09-06 23:25:11 +08:00
|
|
|
} else {
|
|
|
|
// functional
|
|
|
|
const render = Component as FunctionalComponent
|
|
|
|
result = normalizeVNode(
|
|
|
|
render.length > 1
|
|
|
|
? render(props, {
|
|
|
|
attrs,
|
|
|
|
slots,
|
|
|
|
emit
|
|
|
|
})
|
2019-10-24 03:19:55 +08:00
|
|
|
: render(props, null as any /* we know it doesn't need it */)
|
2019-09-06 23:25:11 +08:00
|
|
|
)
|
|
|
|
}
|
|
|
|
} catch (err) {
|
2019-09-07 00:58:31 +08:00
|
|
|
handleError(err, instance, ErrorCodes.RENDER_FUNCTION)
|
2019-09-25 02:37:14 +08:00
|
|
|
result = createVNode(Comment)
|
2019-09-06 23:25:11 +08:00
|
|
|
}
|
|
|
|
currentRenderingInstance = null
|
|
|
|
return result
|
|
|
|
}
|
|
|
|
|
|
|
|
export function shouldUpdateComponent(
|
|
|
|
prevVNode: VNode,
|
|
|
|
nextVNode: VNode,
|
|
|
|
optimized?: boolean
|
|
|
|
): boolean {
|
|
|
|
const { props: prevProps, children: prevChildren } = prevVNode
|
|
|
|
const { props: nextProps, children: nextChildren, patchFlag } = nextVNode
|
2019-10-04 03:09:09 +08:00
|
|
|
if (patchFlag > 0) {
|
2019-09-06 23:25:11 +08:00
|
|
|
if (patchFlag & PatchFlags.DYNAMIC_SLOTS) {
|
|
|
|
// slot content that references values that might have changed,
|
|
|
|
// e.g. in a v-for
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
if (patchFlag & PatchFlags.FULL_PROPS) {
|
|
|
|
// presence of this flag indicates props are always non-null
|
2019-10-05 22:09:34 +08:00
|
|
|
return hasPropsChanged(prevProps!, nextProps!)
|
2019-09-06 23:25:11 +08:00
|
|
|
} else if (patchFlag & PatchFlags.PROPS) {
|
2019-10-05 22:09:34 +08:00
|
|
|
const dynamicProps = nextVNode.dynamicProps!
|
2019-09-06 23:25:11 +08:00
|
|
|
for (let i = 0; i < dynamicProps.length; i++) {
|
|
|
|
const key = dynamicProps[i]
|
2019-10-05 22:09:34 +08:00
|
|
|
if (nextProps![key] !== prevProps![key]) {
|
2019-09-06 23:25:11 +08:00
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (!optimized) {
|
|
|
|
// this path is only taken by manually written render functions
|
|
|
|
// so presence of any children leads to a forced update
|
|
|
|
if (prevChildren != null || nextChildren != null) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
if (prevProps === nextProps) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (prevProps === null) {
|
|
|
|
return nextProps !== null
|
|
|
|
}
|
|
|
|
if (nextProps === null) {
|
2019-10-12 23:00:29 +08:00
|
|
|
return true
|
2019-09-06 23:25:11 +08:00
|
|
|
}
|
|
|
|
return hasPropsChanged(prevProps, nextProps)
|
|
|
|
}
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
|
|
|
|
function hasPropsChanged(prevProps: Data, nextProps: Data): boolean {
|
|
|
|
const nextKeys = Object.keys(nextProps)
|
|
|
|
if (nextKeys.length !== Object.keys(prevProps).length) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
for (let i = 0; i < nextKeys.length; i++) {
|
|
|
|
const key = nextKeys[i]
|
|
|
|
if (nextProps[key] !== prevProps[key]) {
|
|
|
|
return true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return false
|
|
|
|
}
|