wip: adjust lifecycle

This commit is contained in:
Evan You 2019-05-28 19:59:54 +08:00
parent 19ed750078
commit 7a3a5850dc
3 changed files with 15 additions and 28 deletions

View File

@ -7,6 +7,7 @@ function injectHook(
) {
if (target) {
const existing = target[name]
// TODO inject a error-handling wrapped version of the hook
if (existing !== null) {
existing.push(hook)
} else {

View File

@ -1,5 +1,5 @@
// TODO:
// - lifecycle / refs
// - refs
// - slots
// - keep alive
// - app context
@ -28,17 +28,18 @@ import {
shouldUpdateComponent,
createComponentInstance
} from './component'
import {
queueJob,
queuePostFlushCb,
flushPostFlushCbs,
queueReversePostFlushCb
} from './scheduler'
import { queueJob, queuePostFlushCb, flushPostFlushCbs } from './scheduler'
function isSameType(n1: VNode, n2: VNode): boolean {
return n1.type === n2.type && n1.key === n2.key
}
function invokeHooks(hooks: Function[]) {
for (let i = 0; i < hooks.length; i++) {
hooks[i]()
}
}
export type HostNode = any
export interface RendererOptions {
@ -364,6 +365,9 @@ export function createRenderer(options: RendererOptions) {
// initial mount
instance.vnode = vnode
const subTree = (instance.subTree = renderComponentRoot(instance))
if (instance.bm !== null) {
invokeHooks(instance.bm)
}
patch(null, subTree, container, anchor)
vnode.el = subTree.el
// mounted hook
@ -391,8 +395,7 @@ export function createRenderer(options: RendererOptions) {
}
// upated hook
if (instance.u !== null) {
// updated hooks are queued top-down, but should be fired bottom up
queueReversePostFlushCb(instance.u)
queuePostFlushCb(instance.u)
}
}
},

View File

@ -1,6 +1,5 @@
const queue: Function[] = []
const postFlushCbs: Function[] = []
const reversePostFlushCbs: Function[] = []
const p = Promise.resolve()
let isFlushing = false
@ -20,32 +19,16 @@ export function queueJob(job: () => void, onError?: (err: Error) => void) {
}
export function queuePostFlushCb(cb: Function | Function[]) {
queuePostCb(cb, postFlushCbs)
}
export function queueReversePostFlushCb(cb: Function | Function[]) {
queuePostCb(cb, reversePostFlushCbs)
}
function queuePostCb(cb: Function | Function[], queue: Function[]) {
if (Array.isArray(cb)) {
queue.push.apply(postFlushCbs, cb)
postFlushCbs.push.apply(postFlushCbs, cb)
} else {
queue.push(cb)
postFlushCbs.push(cb)
}
}
const dedupe = (cbs: Function[]): Function[] => Array.from(new Set(cbs))
export function flushPostFlushCbs() {
if (reversePostFlushCbs.length) {
const cbs = dedupe(reversePostFlushCbs)
reversePostFlushCbs.length = 0
let i = cbs.length
while (i--) {
cbs[i]()
}
}
if (postFlushCbs.length) {
const cbs = dedupe(postFlushCbs)
postFlushCbs.length = 0