Quindi voglio passare gli oggetti di scena a un componente Vue, ma mi aspetto che questi oggetti di scena cambino in futuro dall'interno di quel componente, ad esempio quando aggiorno quel componente Vue dall'interno usando AJAX. Quindi sono solo per l'inizializzazione del componente.

Il mio cars-listelemento componente Vue in cui passo gli oggetti di scena con proprietà iniziali a single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

Il modo in cui lo faccio in questo momento che dentro la mia single-carcomponente sto assegnando this.initialPropertiesalla mia this.data.propertiessul created()gancio di inizializzazione. E funziona ed è reattivo.

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

Ma il mio problema è che non so se è un modo corretto per farlo? Non mi causerà dei guai lungo la strada? O c'è un modo migliore per farlo?

Grazie a questo https://github.com/vuejs/vuejs.org/pull/567 ora conosco la risposta.

Metodo 1

Passa il prop iniziale direttamente ai dati. Come l'esempio nei documenti aggiornati:

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

Ma tieni a mente se il prop passato è un oggetto o un array che viene utilizzato nello stato del componente genitore, qualsiasi modifica a quel prop risulterà nel cambiamento in quello stato del componente genitore.

Attenzione : questo metodo non è consigliato. Renderà imprevedibili i tuoi componenti. Se è necessario impostare i dati padre dai componenti figlio, utilizzare la gestione dello stato come Vuex o utilizzare "v-model". https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Metodo 2

Se il tuo oggetto Vue.util.extenddi scena iniziale è un oggetto o un array e se non vuoi che i cambiamenti nello stato dei figli si propagino allo stato genitore, usa ad esempio [1] per fare una copia degli oggetti invece che puntano direttamente ai dati dei bambini, come questo:

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

Metodo 3

È inoltre possibile utilizzare l'operatore di diffusione per clonare gli oggetti di scena. Maggiori dettagli nella risposta di Igor: https://stackoverflow.com/a/51911118/3143704

Ma tieni presente che gli operatori di diffusione non sono supportati nei browser meno recenti e per una migliore compatibilità dovrai trasferire il codice, ad esempio usando babel .

Note a piè di pagina

[1] Tieni presente che si tratta di un'utilità Vue interna e potrebbe cambiare con le nuove versioni. Potresti voler usare altri metodi per copiare quell'oggetto, vedi " Come faccio a clonare correttamente un oggetto JavaScript? ".

Il mio violino dove lo stavo provando: https://jsfiddle.net/sm4kx7p9/3/

Insieme alla risposta di @ dominik-serafin:

Nel caso in cui stai passando un oggetto, puoi facilmente clonarlo utilizzando l'operatore di diffusione (sintassi ES6):

 props: {
   record: {
     type: Object,
     required: true
   }
 },

data () { // opt. 1
  return {
    recordLocal: {...this.record}
  }
},

computed: { // opt. 2
  recordLocal () {
    return {...this.record}
  }
},

Ma la cosa più importante è ricordarsi di usare opt. 2 nel caso in cui si passi un valore calcolato, o più di questo un valore asincrono. In caso contrario, il valore locale non verrà aggiornato.

Demo:

Vue.component('card', { 
  template: '#app2',
  props: {
    test1: null,
    test2: null
  },
  data () { // opt. 1
    return {
      test1AsData: {...this.test1}
    }
  },
  computed: { // opt. 2
    test2AsComputed () {
      return {...this.test2}
    }
  }
})

new Vue({
  el: "#app1",
  data () {
    return {
      test1: {1: 'will not update'},
      test2: {2: 'will update after 1 second'}
    }
  },
  mounted () {
    setTimeout(() => {
      this.test1 = {1: 'updated!'}
      this.test2 = {2: 'updated!'}
    }, 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app1">
  <card :test1="test1" :test2="test2"></card>
</div>

<template id="app2">
  <div>
    test1 as data: {{test1AsData}}
    <hr />
    test2 as computed: {{test2AsComputed}}
  </div>
</template>

https://jsfiddle.net/nomikos3/eywraw8t/281070/

Credo che tu lo stia facendo bene perché è ciò che è dichiarato nei documenti.

Definisci una proprietà di dati locali che utilizzi il valore iniziale del prop come valore iniziale

https://vuejs.org/guide/components.html#One-Way-Data-Flow