javascript - masalah responsif 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>

Cetak dalam konsol: vm.count.id--

Anda akan dapati item.id juga telah ditukar. Saya jelas hanya menukar count.id

Bagaimana untuk mengelakkan penyegerakan? Saya cuma nak tukar count.id

Answer 1

Masalah salinan cetek dan salinan dalam.

Answer 2

Ini masih menjadi isu asas dengan jenis data JS.
Berdasarkan kod yang anda berikan, item ialah tatasusunan, menetapkan tatasusunan kepada pembolehubah lain hanya memberikan rujukan kepada tatasusunan Sudah tentu, jika anda menukar tatasusunan ini, semua rujukan kepada tatasusunan ini.

Penyelesaian 1:

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

Answer 3

Tatasusunan ialah struktur indeks, yang bermaksud ia bersamaan dengan dua penunjuk yang menunjuk ke tempat yang sama, jadi jika anda menukar salah satu daripadanya, yang lain juga akan berubah. Mengenai cara untuk mengelakkannya, saya mengesyorkan menggunakan tugasan memusnahkan dalam ES6 Anda boleh merujuk kepada dokumentasi.
Beri saya contoh: