Version

3.1.4

Reproduction link

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8c3Bhbj5hPC9zcGFuPlxuICA8c3Bhbj5iPC9zcGFuPlxuICA8c3Bhbj5jPC9zcGFuPlxuPC90ZW1wbGF0ZT5cbiJ9

Steps to reproduce

<span>a</span>
<span>b</span>
<span>c</span>

What is expected?

Consistent with browser behavior. shown as 'a b c'

What is actually happening?

'abc'

these code in native html will be shown as 'a b c'. But in vue they will be shown as 'abc', no whitespace. Is it a bug or feature?

https://github.com/vuejs/vue-next/blob/348c3b01e56383ffa70b180d1376fdf4ac12e274/packages/compiler-core/src/parse.ts#L259-L274

removing whitespace is an optimization and simplification process to reduce the amount of nodes vue has to deal with.

you will have to find your own workaround, there is no easy way disabling whitespace removal except by a compiler option, which effect the whole project.

<span>a </span>
<span>b </span>
<span>c </span>

or putting all elements on the same line, as noted in https://github.com/vuejs/vue-next/issues/2431

@lidlanca Thanks, I see.