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

在控制台裡列印： vm.count.id--

會發現 items.id 也跟著改了。我明明只改 count.id

如何避免同步？我只想更改 count.id;

Answer 1

淺拷貝和深拷貝的問題。

Answer 2

這還是JS資料型別的基礎問題。
從你提供的程式碼判斷item是個數組， 把一個數組賦值給另外一個變量，只是賦值了引用， 兩個都是引用了一個數組， 當然更改這個數組，所有引用這個數組的都會發生變化。

解決方案一：

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

Answer 3

數組是索引結構，也就是說相當於兩個指標指向同一個地方，所以說你改變其中一個，另一個也會跟著改變。至於如何避免，我建議用ES6中的解構賦值，可以參考一下文件。
舉個栗子：