`v-el` and `v-ref` usage change after binding syntax update

[yyx990803]

This was originally raised in https://github.com/yyx990803/vue/issues/1173#issuecomment-139092569

Problem

v-ref and v-el are some special built-in feature that allow you to register a child component or a DOM node on the parent component. They are not really directives, but were presented as "literal directives" in previous versions. In 1.0.0, we are making literal directives more explicit, which also makes writing them a little more verbose (example: v-ref.literal="xxx").

In addition, the user needs to consult the doc to remember that v-el registers under vm.$$, and v-ref registers under vm.$. The $ and $$ are not very explicit and does not map well with the directive names.

Proposal

Rename to more explicit properties:

• vm.$ -> vm.$refs
• vm.$$ -> vm.$els

Use the arguments in the new binding syntax to mark the ref id:

<!-- child component ref, registers vm.$refs.child -->
<comp v-ref:child></comp>
<!-- elsewhere... -->
{{$refs.child.msg}}

<!-- element ref, registers vm.$els.node -->
<div v-el:node></div>

Caveats

camelCase names are converted to all lowercase when the HTML is parsed:

<comp v-ref:someThing></comp>

Gets rendered as:

<comp v-ref:something></comp>

Thus, it is necessary to use the dash-case <-> camelCase mapping for refs too (similar to props):

<comp v-ref:some-thing></comp>
{{ $refs.someThing.msg }}

[azamat-sharapov]

👍

[codebryo]

👍

[thelinuxlich]

totally agree

[kazupon]

👍

[TerenceZ]

I've tried this syntax and I find that the browser will transform the camelcase into lowercase, it means if I write $.someComp, it will transform to $.somecomp, it destroys the benefits 1 and not easy to discover this...

[yyx990803]

@TerenceZ thanks for pointing that out - I think that can be solved by adding a warning that suggests using dash-case (which auto converts to camelCase, like props do)?

[yyx990803]

Oh, actually, because it gets converted during browser parsing, there's not really a way to detect it... I guess we'll have to make that very clear in the docs.

[yyx990803]

Alternatively:

<comp $="someThing"></comp>
<div $$="node"></div>

[tianhai82]

actually $="someThing" and $$="node" is not very intuitive, esp for new users. we have no clues to guess wat does $ and $$ stands for. Even for experienced users, they will also make mistake using it.

[TerenceZ]

@yyx990803 @tianhai82 ya, I also think the alternative notation is not intuitive but confused, esp for new users. Because it uses dot notation $.someThing in js and equation $='someThing' in template. The later seems to assign someThing to $.

IMO, although the old notation will let user have to remember the transform from ref | el to $ | $$, but it is only non-intuitive, not confused.

[nirazul]

I disagree with the argument that the $ notation is not intuitive. Even in Chrome devtools (and other browser devtools) we have the $('selector') syntax. It's not quite the same but together with the ubiquitous jQuery syntax, for many developers it is clear that $ means 'select' or 'store' in a variable.

[nervgh]

@tianhai82
@TerenceZ
@nirazul
+1

I am not agree.