vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.36k stars 8.29k forks source link

type/children from child different in prod/dev mode #6174

Open yooouuri opened 2 years ago

yooouuri commented 2 years ago

Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHRhYnMgfSBmcm9tICcuL1RhYnMudHMnXG5cbmNvbnN0IG1zZyA9IHJlZignSGVsbG8gV29ybGQhJylcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxoMT57eyBtc2cgfX08L2gxPlxuICA8aW5wdXQgdi1tb2RlbD1cIm1zZ1wiPlxuICBcbiAgPHRhYnM+XG4gICAgPGRpdj5cbiAgICAgIEZpcnN0IHRhYlxuICAgIDwvZGl2PlxuICAgIDxkaXYgdi1pZj1cImZhbHNlXCI+XG4gICAgICBIaWRkZW4gdGFiXG4gICAgPC9kaXY+XG4gIDwvdGFicz5cbjwvdGVtcGxhdGU+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInZ1ZS9zZXJ2ZXItcmVuZGVyZXJcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIlRhYnMudHMiOiJpbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIGggfSBmcm9tICd2dWUnXG5cbmV4cG9ydCBjb25zdCB0YWJzID0gZGVmaW5lQ29tcG9uZW50KHtcbiAgc2V0dXAoXywgeyBzbG90cyB9KSB7XG4gICAgY29uc3QgdGFicyA9IHNsb3RzLmRlZmF1bHQoKVxuICAgIFxuICAgIGNvbnNvbGUubG9nKHRhYnNbMV0udHlwZSlcbiAgICBjb25zb2xlLmxvZyh0YWJzWzFdLmNoaWxkcmVuKVxuICAgIFxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICByZXR1cm4gaCgnZGl2JywgJ2pvZWpvZScpXG4gICAgfVxuICB9XG59KVxuIn0=

Steps to reproduce

Open console in the SFC,download project, run build and preview

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import { tabs } from './Tabs.ts'
</script>

<template>
  <tabs>
    <div>
      First tab
    </div>
    <div v-if="false">
      Hidden tab
    </div>
  </tabs>
</template>

Tabs.ts

import { defineComponent, h } from 'vue'

export const tabs = defineComponent({
  setup(_, { slots }) {
    const tabs = slots.default()

    console.log(tabs[1].type)
    console.log(tabs[1].children)

    return () => {
      return h('div', 'tabs')
    }
  }
})

What is expected?

Show the same type and children in dev and production mode

What is actually happening?

it shows Symbol(Comment) and v-if (the type and children from the v-if="false" tab) in the console

image

download project, run build and preview, it shows Symbol() and empty string as type and children.

image

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1 Pro
    Memory: 70.72 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.4.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - /opt/homebrew/bin/npm
  Browsers:
    Firefox: 101.0.1
    Safari: 15.5
  npmPackages:
    vue: ^3.2.0 => 3.2.37

Any additional comments?

No response

LinusBorg commented 2 years ago

that's expected. during dev, comments are used as markers for various things such as fragments, for reasons such as better debugability, HMR etc.

We can think about how to make it easier to get the actual children, though