Comportamento da Coerção de Atributo

rutura

INFORMAÇÃO

Isto é uma mudança da API interna de baixo nível e não afeta a maioria dos programadores.

Visão Geral

Eis um sumário de alto nível das mudanças:

• Eliminar o conceito interno de atributos enumerados e tratar estes atributos da mesma maneira que os atributos não booleanos.
• RUTURA: Já não remove o atributo se o valor for false booleano. Ao invés disto, é definido como attr="false". Para remover o atributo, usamos null ou undefined.

Para mais informação, continue a leitura!

Sintaxe da 2.x

Na 2.x, tínhamos de seguir estratégias para coagir os valores de v-bind:

• Para alguns pares de atributo/elemento, a Vue está sempre a usar o atributo (propriedade) IDL correspondente: como value de <input>, <select>, <progress>, etc.

• Para "atributos booleanos" e xlinks, a Vue os remove se forem "falsos" (undefined, null ou false) e de outro modo adiciona-os (consulte este exemplo e este).

• Para "atributos enumerados" (atualmente contenteditable, draggable, e spellcheck), a Vue tenta coagi-los para sequência de caracteres (com tratamento especial para contenteditable por agora, para corrigir vuejs/vue#9397).

• Para os outros atributos, removemos os valores "falsos" (undefined, null, ou false) e definimos outros valores como está (consulte este exemplo).

A seguinte tabela descreve como a Vue coage os "atributos enumerados" de maneira diferente com os atributos não booleanos normais:

Expressão de vínculo	foo normal	draggable enumerado
:attr="null"	-	draggable="false"
:attr="undefined"	-	-
:attr="true"	foo="true"	draggable="true"
:attr="false"	-	draggable="false"
:attr="0"	foo="0"	draggable="true"
attr=""	foo=""	draggable="true"
attr="foo"	foo="foo"	draggable="true"
attr	foo=""	draggable="true"

Nós podemos ver a partir da tabela acima, a implementação atual coage true para 'true' mas remove o atributo se for false. Isto também levava à inconsistências e exigia que os utilizadores coagissem manualmente os valores booleanos para sequência de caracteres nos casos de uso muito comuns como atributos aria-* como aria-selected, aria-hidden, etc.

Sintaxe da 3.x

Nós tencionamos desistir deste conceito interno de "atributos enumerados" e tratá-los como atributos de HTML não booleano normais.

• Isto soluciona a inconsistência entre atributos não booleanos normais e "atributos enumerados".
• Também torna possível usar outros valores além de 'true' e 'false', ou mesmo palavras-chave que ainda virão, para atributos como contenteditable.

Para os atributos não booleanos, a Vue parará de as remover se forem false e as coagirá para 'false'.

• Isto soluciona a inconsistência entre true e false e facilita a saída de atributos aria-*

A seguinte tabela descreve o novo comportamento:

Expressão de vínculo	foo normal	draggable enumerado
:attr="null"	-	- *
:attr="undefined"	-	-
:attr="true"	foo="true"	draggable="true"
:attr="false"	foo="false" *	draggable="false"
:attr="0"	foo="0"	draggable="0" *
attr=""	foo=""	draggable="" *
attr="foo"	foo="foo"	draggable="foo" *
attr	foo=""	draggable="" *

*: mudado

A coerção para atributos booleanos não é afetada.

Estratégia de Migração

Atributos Enumerados

A ausência dum atributo enumerado e attr="false" pode produzir valores de atributo de IDL diferentes (o que refletirá o estado de fato), descrito da seguinte forma:

Atributo Enumerado Ausente	Atributo & Valor de IDL
contenteditable	contentEditable → 'inherit'
draggable	draggable → false
spellcheck	spellcheck → true

Uma vez que já não coagimos null para 'false' para as “propriedades enumeradas” na 3.x, no caso de contenteditable e spellcheck, os programadores precisarão de mudar estas expressões de v-bind que costumavam a resolver para null para resolver para false ou 'false' no sentido de manter o mesmo comportamento da 2.x.

Na 2.x, os valores inválidos eram coagidos à 'true' para os atributos enumerados. Isto era geralmente involuntário e pouco suscetível de ser usada em grande escala. Na 3.x true ou 'true' deveriam ser explicitamente especificados.

Coagir false to 'false' ao invés de remover o atributo

Na 3.x, null ou undefined deve ser usado para remover explicitamente um atributo.

Comparação entre o comportamento da 2.x & 3.x

Atributo	valor de v-bind 2.x	valor de v-bind 3.x	Saída de HTML
“Atributos enumerados” da 2.x ou seja contenteditable, draggable e spellcheck.	undefined	undefined, null	removido
	true, 'true', '', 1, 'foo'	true, 'true'	"true"
	null, false, 'false'	false, 'false'	"false"
Outros atributos não booleanos por exemplo, aria-checked, tabindex, alt, etc.	undefined, null, false	undefined, null	removido
	'false'	false, 'false'	"false"

Opções da Construção de Migração:

• ATTR_FALSE_VALUE
• ATTR_ENUMERATED_COERCION