javascript - problème de réactivité de vue

Question

<p id="app">
    <h1>
        {{ count.id }}
    </h1>
    <h2>
        {{ item[0].id }}
    </h2>
</p>
<script>
let vm = new Vue({
    el: '#app',
    data () {
        return {
            item: [
                {
                    id: 60
                }
            ],
            count: {}
        }
    },
    mounted () {
        this.count = this.item[0];  // 赋值给count
    }
});
</script>

Imprimer dans la console : vm.count.id--

Vous constaterez que items.id a également été modifié. J'ai évidemment seulement changé count.id

Comment éviter la synchronisation ? Je veux juste changer count.id

Answer 1

Le problème de la copie superficielle et de la copie profonde.

Answer 2

Il s'agit toujours d'un problème fondamental avec les types de données JS.
À en juger par le code que vous avez fourni, item est un tableau. L'attribution d'un tableau à une autre variable attribue uniquement une référence à un tableau. Bien sûr, si vous modifiez ce tableau, toutes les références à ce tableau changeront.

Solution 1 :

this.count = this.item.slice(0, 1);

Answer 3

Le tableau est une structure d'index, ce qui signifie qu'il équivaut à deux pointeurs pointant vers le même endroit, donc si vous changez l'un d'eux, l'autre changera également. Pour savoir comment l'éviter, je recommande d'utiliser l'affectation de déstructuration dans ES6. Vous pouvez vous référer à la documentation.
Prends une châtaigne :