Vue-next: remove comment dom node

[tangjinzhou]

Version

3.0.0-beta.14

Reproduction link

https://jsbin.com/vucokaroxo/1/edit?html,output

Steps to reproduce

null and undefined will generate comment dom.

What is expected?

remove it

What is actually happening?

have comment dom

[lawvs]

It might be expected

https://github.com/vuejs/vue/issues/5117#issuecomment-284927949

v-if is usually used for elements in a relatively stable node structure, rendering it to empty comment tags makes vnode lists diffing more efficient as the lists are more "stable", and it avoids some edge cases when elements are not keyed. In your case it doesn't seem to cause any real issue other than small inspection annoyance, so unfortunately I don't think we would change this behavior.

// https://github.com/vuejs/vue-next/blob/master/packages/runtime-core/src/vnode.ts#L491-L493
if (child == null || typeof child === 'boolean') {
  // empty placeholder
  return createVNode(Comment)
} else if (isArray(child)) {

[underfin]

@lawvs .That scene is underv-if create comment.This issues really is inconsistent with 2.x.

[yyx990803]

This is intended. It doesn't affect visual output so there's no point to be "consistent" with 2.x.

[underfin]

I track this with 2.x.Find some inconsistent behavior with the blew.It's has a bit of weird.

      // ""
      return this.$createElement("div", [true]);
      // "true"
      return this.$createElement("div", true);

[tangjinzhou]

Too ugly, there will be many comment nodes on the DOM structure.

[yyx990803]

Your user doesn't inspect your DOM.