More explicit props
What problem does this feature solve?
How about distinguishing Vue props from HTML Attributes? I mean, since Vue instructions can use objects, why use the same flat interface as HTML Attributes? Since JavaScript has been used restrictively in HTML at the syntax level, why add another layer of humanistic restrictions. When you have plenty of time, it's better to say something explicitly than to be vague.
Here is a list of the ineffective side effects of props on Vue so far:
- Extra code costs, writing and storing more
=
and"
. - Extra compilation costs, distinguishing two things with the same syntactic structure.
- Extra documentation costs, explain two confusing things.
- Extra reading costs, reading two things that look like.
- Extra conflict troubles, renaming two things with duplicate names.
What does the proposed API look like?
<!-- like this -->
<AComponent :props="{ foo: 0, bar: 1 }" title="HTML Attributes"/>
<!-- instead of -->
<AComponent foo="0" :bar="1" title="HTML Attributes"/>
This can be implemented in userland. You can enforce this pattern in your own codebase.
If you really want to propose a syntax-level change for Vue, it's better to go through the RFC process to help everybody sort out the pros and cons.
Ps. The number of global HTML attributes (+ aria-* attributes) are rather limited or easy to recognize so I don't think it will cause much confusion.