question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Change vnode type

See original GitHub issue

Just wondering what would happen if we change the VNode type from:

const vnode = {
  type: "h1",
  props: { class: "heading" },
  children: "Hello"
}

to this:

const vnode = ["h1", { class: "heading" }, "Hello"]

To generate the vnode you call h("h1", { class: "heading" }, "Hello") as usual.

This is a private API, so it would not be a breaking change unless you were creating vnodes directly without h().

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
leeoniyacommented, Dec 9, 2017

you should bench this. javascript JITs will recognize the object by its consistent shape and optimize it via a hidden class. arrays are only faster for iteration. i dont think you intend to iterate vnode properties so it’s likely a net perf regression.

0reactions
jorgebucarancommented, Dec 18, 2017

@Swizz We could still have a function that turns a VNode into a cool array VNode though.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Can I modify Vue.js VNodes? - Stack Overflow
I want to assign some attributes and classes to the children VNode through data object. That just ...
Read more >
VNode type definition causes error in TypeScript 4.8 #6554
I tried just changing the second type parameter of VNode from HostElement = RendererElement to HostElement extends RendererElement = ...
Read more >
vnode(9) - OpenBSD manual pages
A vnode is an object in kernel memory that speaks the UNIX file interface (open, read, write, close, readdir, etc.). Vnodes can represent...
Read more >
Diving into the Virtual DOM - Vue.js 3 Course
In this article, we do a dive into the virtual dom in Vue.js 3, and how we can traverse it with the goal...
Read more >
virtual DOM nodes - Mithril.js
Documentation on Mithril.js' virtual DOM nodes (vnodes) and how they work. ... version and only modifies DOM elements in spots where there are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found