Skip to content

Commit

Permalink
fix(runtime-core): fix beforeUpdate call timing to allow state mutation
Browse files Browse the repository at this point in the history
fix #1899
  • Loading branch information
yyx990803 committed Aug 19, 2020
1 parent 24041b7 commit 1eb6067
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 16 deletions.
30 changes: 30 additions & 0 deletions packages/runtime-core/__tests__/apiLifecycle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,36 @@ describe('api: lifecycle hooks', () => {
count.value++
await nextTick()
expect(fn).toHaveBeenCalledTimes(1)
expect(serializeInner(root)).toBe(`<div>1</div>`)
})

it('state mutation in onBeforeUpdate', async () => {
const count = ref(0)
const root = nodeOps.createElement('div')
const fn = jest.fn(() => {
// should be called before inner div is updated
expect(serializeInner(root)).toBe(`<div>0</div>`)
count.value++
})
const renderSpy = jest.fn()

const Comp = {
setup() {
onBeforeUpdate(fn)
return () => {
renderSpy()
return h('div', count.value)
}
}
}
render(h(Comp), root)
expect(renderSpy).toHaveBeenCalledTimes(1)

count.value++
await nextTick()
expect(fn).toHaveBeenCalledTimes(1)
expect(renderSpy).toHaveBeenCalledTimes(2)
expect(serializeInner(root)).toBe(`<div>2</div>`)
})

it('onUpdated', async () => {
Expand Down
40 changes: 24 additions & 16 deletions packages/runtime-core/src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1281,13 +1281,7 @@ function baseCreateRenderer(
let vnodeHook: VNodeHook | null | undefined
const { el, props } = initialVNode
const { bm, m, parent } = instance
if (__DEV__) {
startMeasure(instance, `render`)
}
const subTree = (instance.subTree = renderComponentRoot(instance))
if (__DEV__) {
endMeasure(instance, `render`)
}

// beforeMount hook
if (bm) {
invokeArrayFns(bm)
Expand All @@ -1296,6 +1290,16 @@ function baseCreateRenderer(
if ((vnodeHook = props && props.onVnodeBeforeMount)) {
invokeVNodeHook(vnodeHook, parent, initialVNode)
}

// render
if (__DEV__) {
startMeasure(instance, `render`)
}
const subTree = (instance.subTree = renderComponentRoot(instance))
if (__DEV__) {
endMeasure(instance, `render`)
}

if (el && hydrateNode) {
if (__DEV__) {
startMeasure(instance, `hydrate`)
Expand Down Expand Up @@ -1365,16 +1369,8 @@ function baseCreateRenderer(
} else {
next = vnode
}
if (__DEV__) {
startMeasure(instance, `render`)
}
const nextTree = renderComponentRoot(instance)
if (__DEV__) {
endMeasure(instance, `render`)
}
const prevTree = instance.subTree
instance.subTree = nextTree
next.el = vnode.el

// beforeUpdate hook
if (bu) {
invokeArrayFns(bu)
Expand All @@ -1383,6 +1379,18 @@ function baseCreateRenderer(
if ((vnodeHook = next.props && next.props.onVnodeBeforeUpdate)) {
invokeVNodeHook(vnodeHook, parent, next, vnode)
}

// render
if (__DEV__) {
startMeasure(instance, `render`)
}
const nextTree = renderComponentRoot(instance)
if (__DEV__) {
endMeasure(instance, `render`)
}
const prevTree = instance.subTree
instance.subTree = nextTree

// reset refs
// only needed if previous patch had refs
if (instance.refs !== EMPTY_OBJ) {
Expand Down

0 comments on commit 1eb6067

Please sign in to comment.