Vue: Hoisting-up vnode - infinite loop warning

Created on 15 Sep 2017 · 3Comments · Source: vuejs/vue

Version

2.4.4

Reproduction link

http://jsfiddle.net/vjvMp/2019/

Steps to reproduce

The precise layout of the components are in the JSFiddle. The assembly of the components is for some reason very fragile which makes me think that this is a bug. For example, if I remove the top-most layout component that shouldn't affect the code, the warning disappears: http://jsfiddle.net/vjvMp/2020/

What is expected?

For the slot on the Child to be hoisted up to the Parent and rendered above the Child without problem.

What is actually happening?

The Child gets rendered but there is an infinite update loop warning.

Source

privatenumber

Most helpful comment

You are returning API from data, this makes the while api object reactive
When you set the vnodes into the API that makes Vue attempt to convert the vnode
In 2.4.3 slot nodes are now deep-cloned on re-render to fix some bugs, this makes the render function register the entire vnode to be reactive dependency, so mutating the vnode triggers a re-render.

For now your workaround could be either Object.freeze the vnode or do not make the api injection reactive.

yyx990803 on 15 Sep 2017

👍4

All 3 comments

The code was working at v2.4.2; seems like it was introduced at v2.4.3.

privatenumber on 15 Sep 2017

You are returning API from data, this makes the while api object reactive
When you set the vnodes into the API that makes Vue attempt to convert the vnode
In 2.4.3 slot nodes are now deep-cloned on re-render to fix some bugs, this makes the render function register the entire vnode to be reactive dependency, so mutating the vnode triggers a re-render.

For now your workaround could be either Object.freeze the vnode or do not make the api injection reactive.

yyx990803 on 15 Sep 2017

👍4

Fix works great! Thanks @yyx990803

privatenumber on 15 Sep 2017

Was this page helpful?

0 / 5 - 0 ratings