Vue.js

# Opção Data
breaking

# Visão Geral

  • BREAKING: A declaração da opção data do componente não aceita mais um objeto JavaScript e espera uma declaração de função.

  • BREAKING: Quando mesclando múltiplos valores de retorno do data de mixins ou extends, a mescla agora é superficial e não profunda (apenas propriedades de nível raiz são mescladas).

# Sintaxe v2.x

Na v2.x, os desenvolvedores poderiam definir a opção data como um objeto ou uma função.

Por exemplo:

<!-- Declaração como Objeto -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- Declaração como Função -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Apesar de fornecer algumas conveniências em termos de instâncias raiz possuirem um estado compartilhado, isso gerou confusão devido ao fato de que só é possível na instância raiz.

# Atualização v3.x

Na v3.x, a opção data foi padronizada para somente receber uma função que retorna um objeto.

Usando o exemplo acima, haveria apenas uma implementação possível do código:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>
1
2
3
4
5
6
7
8
9
10
11

# Mudança de Comportamento na Mescla de Mixins

Além disso, quando a data() de um componente e seus mixins ou extends de base são mesclados, a mescla agora é feita superficialmente:

const Mixin = {
  data() {
    return {
      user: {
        name: 'Jack',
        id: 1
      }
    }
  }
}

const CompA = {
  mixins: [Mixin],
  data() {
    return {
      user: {
        id: 2
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

No Vue 2.x, a $data resultante seria:

{
  "user": {
    "id": 2,
    "name": "Jack"
  }
}
1
2
3
4
5
6

Na v3.0, o resultado será:

{
  "user": {
    "id": 2
  }
}
1
2
3
4
5

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

# Estratégias de Migração

Para usuários que dependem da declaração em objeto, é recomendado:

  • Extrair os dados compartilhados em um objeto externo e usá-los como propriedade em data
  • Reescrever as referências à informação compartilhada apontando para um novo objeto compartilhado

Para usuários que dependem do comportamento de mesclagem profunda dos mixins, é recomendado refatorar seu código para evitar tal dependência completamente, já que mesclagens profundas de mixins são muito implícitas e podem fazer a lógica do código ser mais difícil de entender e depurar.

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

  • OPTIONS_DATA_FN
  • OPTIONS_DATA_MERGE

← Opção emits →