Javascript – Vue-Reaktionsfähigkeitsproblem
滿天的星座
滿天的星座 2017-05-19 10:39:39
0
3
546
<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>

Drucken Sie in der Konsole: vm.count.id--

Sie werden feststellen, dass auch items.id geändert wurde. Ich habe offensichtlich nur count.id geändert

Wie vermeide ich eine Synchronisierung? Ich möchte nur count.id ändern

滿天的星座
滿天的星座

Antworte allen(3)
phpcn_u1582

浅拷贝和深拷贝的问题。

淡淡烟草味

这还是JS数据类型的基础问题。
从你提供的代码判断item是个数组, 把一个数组赋值给另外一个变量,只是赋值了引用, 两个都是引用了一个数组, 当然更改这个数组,所有引用这个数组的都会发生变化。

解决方案一:

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

数组是索引结构,也就是说相当于两个指针指向同一个地方,所以说你改变其中一个,另一个也会跟着改变。至于如何避免,我推荐用ES6中的解构赋值,你可以参考一下文档。
举个栗子:

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage