vue.js 修改赋值变量问题
最近使用vue.js发现修改赋值的变量,原变量的数据也随之改变了。
例子:
const app = new Vue({
el: '#app',
data: {
list:[1,2,3],
},
methods: {
test() {
let temp = this.list; // 将list赋值给了temp
temp = [1,2], // temp发生改变
console.log(temp); // 打印结果 [1,2]
console.log(this.list); // 打印结果 [1,2]
}
}
});
以下是解决方案:
const app = new Vue({
el: '#app',
data: {
list:[1,2,3],
},
methods: {
test() {
let temp = JSON.parse(JSON.stringify(this.list)); // 将list赋值给了temp
temp = [1,2], // temp发生改变
console.log(temp); // 打印结果 [1,2]
console.log(this.list); // 打印结果 [1,2,3]
}
}
});
原因:
在vue中,数组和对象传递都是引用传递。赋值时传递的并不是值,而是指向了同一个空间。