Comportamento da Coerção de Atributo

breaking

Info

Esta é uma alteração de baixo nível da API interna e não afeta a maioria dos desenvolvedores.

Visão Geral

Aqui está um resumo de alto nível das mudanças:

• Abandonado o conceito interno de atributos enumerados e tratando esses atributos da mesma forma que atributos normais não booleanos
• QUEBRA: Não remove mais o atributo se o valor for booleano false. Em vez disso, é definido como attr="false". Para remover o atributo, use null ou undefined.

Para mais informações, continue lendo!

Sintaxe v2.x

Na v2.x, tínhamos as seguintes estratégias para forçar os valores de v-bind:

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

• Para "atributos booleanos (opens new window)" e xlinks (opens new window), o Vue os remove se forem "falsos" (undefined, null ou false (opens new window)) e os adiciona caso contrário (veja aqui (opens new window) e aqui (opens new window)).

• Para "atributos enumerados (opens new window)" (atualmente contenteditable, draggable e spellcheck), Vue tenta coagí-los (opens new window) para string (com tratamento especial para contenteditable por enquanto, para corrigir o problema vuejs/vue#9397 (opens new window)).

• Para outros atributos, removemos valores "falsos" (undefined, null ou false) e definimos outros valores como estão (veja aqui (opens new window)).

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

Expressão de vinculação	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"

Podemos ver na tabela acima, a implementação atual coage true para 'true', mas remove o atributo se for false. Isso também levou à inconsistência e obrigou os usuários a coagir manualmente os valores booleanos para string em casos de uso muito comuns, como atributos aria-* como aria-selected,aria-hidden, etc.

Sintaxe v3.x

Pretendemos abandonar esse conceito interno de "atributos enumerados" e tratá-los como atributos HTML não booleanos normais.

• Isso resolve a inconsistência entre os atributos normais não booleanos e “atributos enumerados”
• Também torna possível usar valores diferentes de 'true' e 'false', ou mesmo palavras-chave ainda por vir, para atributos como contenteditable

Para atributos não booleanos, o Vue irá parar de removê-los se eles forem false e irá coagí-los a serem 'false'.

• Isso resolve a inconsistência entre true e false, e torna a saída dos atributos aria-* mais fácil

A tabela a seguir descreve o novo comportamento:

Expressão de vinculação	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="" *

*: modificado

A coerção para atributos booleanos não foi alterada.

Estratégia de Migração

Atributos enumerados

A ausência de um atributo enumerado e attr="false" pode produzir diferentes valores de atributo IDL (que refletirão o estado real), descritos a seguir:

Atributo enumerado ausente	Atributo IDL & valor
contenteditable	contentEditable → 'inherit'
draggable	draggable → false
spellcheck	spellcheck → true

Para manter o comportamento antigo funcionando, e como estaremos coagindo false para 'false', na v3.x, os desenvolvedores Vue precisam fazer com que a expressão v-bind seja resolvida para false ou 'false' para contenteditable e spellcheck.

Uma vez que não forçamos mais null para 'false' em "propriedades enumeradas" na v3.x, no caso de contenteditable espellcheck, os desenvolvedores precisarão alterar as expressões v-bind que costumavam resolver para null para resolverem para false ou 'false', a fim de manter o mesmo comportamento da v2.x.

Na v2.x, os valores inválidos eram coagidos para 'true' em atributos enumerados. Isso geralmente não era intencional e improvável de ser confiável em grande escala. Na v3.x true ou 'true' devem ser explicitamente especificados.

Coagir false para 'false' em vez de remover o atributo

Na v3.x, null ou undefined devem ser usados para remover explicitamente um atributo.

Comparação entre o comportamento v2.x e v3.x

Atributo	Valor de v-bind v2.x	Valor de v-bind v3.x	Saída HTML
“Atributos enumerados” na v2.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"

Sinalizadores na compilação de migração:

• ATTR_FALSE_VALUE
• ATTR_ENUMERATED_COERCION