Vue.js

# Comportamento ao Combinar v-bind
breaking

# Visão Geral

  • QUEBRA: A ordem das vinculações para v-bind irá afetar o resultado da renderização.

# Visão Geral

Quando se está dinamicamente vinculando atributos em um elemento, um cenário comum envolve utilizar tanto a sintaxe v-bind="object" quanto os atributos individuais no mesmo elemento. Contudo, isso gera questões tal como a prioridade na combinação.

# Sintaxe 2.x

No 2.x, se um elemento tem tanto o v-bind="object" quanto um atributo individual idêntico definido, o atributo individual sempre vai sobrescrever as vinculações do object.

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- resultado -->
<div id="red"></div>
1
2
3
4

# Sintaxe v3.x

Na v3.x, se um elemento tem tanto o v-bind="object" quanto um atributo individual idêntico definido, a ordem de como as vinculações são declaradas determina como elas serão combinadas. Em outras palavras, em vez de assumir que os desenvolvedores querem que o atributo individual sempre sobrescreva o que está definido no object, agora os desenvolvedores terão mais controle sobre qual o comportamento desejado na combinação.

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- resultado -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- resultado -->
<div id="red"></div>
1
2
3
4
5
6
7
8
9

# Estratégia de Migração

Se você está confiando nessa funcionalidade de sobrescrita do v-bind, nós atualmente recomendamos você à garantir que seu atributo v-bind seja definido sempre antes dos atributos individuais.

Sinalizador na compilação de migração: COMPILER_V_BIND_OBJECT_ORDER

← Eventos de Ciclo de Vida do VNode →