javascript - vue響應式的問題
滿天的星座
滿天的星座 2017-05-19 10:39:39
0
3
549
<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;

滿天的星座
滿天的星座

全部回覆(3)
phpcn_u1582

淺拷貝和深拷貝的問題。

淡淡烟草味

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

解決方案一:

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

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板