# 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:

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 draggablefalse
spellcheck spellchecktrue

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"

Migration build flags:

  • ATTR_FALSE_VALUE
  • ATTR_ENUMERATED_COERSION