关于vue中解除数据绑定的方法
用了许久的vue,都知道vue里面赋值是双向绑定的,这个虽然有利于数据传输,但在js赋值的时候也容易出现bug,例子如下:
<script>
data(){
return {
list:[1,2,3,4,5]
}
},
created() {
let data = this.list
// 删除数组中的第一个元素
data.splice(0,1)
console.log(data) // [2,3,4,5]
console.log(this.list) // [2,3,4,5]
}
</script>
本身只是想把 this.list 拿过来赋值操作使用,但是在操作data的时候,把原先的 this.list 也给修改了,这时候就需要解除这里的数据绑定,下面总结我自己用的几个解除绑定的方法:
- 使用‘…’语法解构赋值
//在赋值的时候使用...拷贝
let data = [...this.list]
- 使用JSON里面的parse和stringify
//使用JSON.parse() 和 JSON.stringify()
let data = JSON.parse(JSON.stringify(this.list))
- 使用Object.assign()
//使用Object.assign()
let data = Object.assign(this.list,[])
目前就想到这三种方法,有更好的方法欢迎评论区交流!