关于Vue data对象赋值的问题

遇到这么一个问题： 把data中的某个对象赋值给一个变量，修改变量，会同时把data中的对象也一同修改，所以，这个赋值应该就是引用了地址，贴个代码

<script>
    export default {
        data () {
            return {
                productLists: [
                    {
                        id: 1,
                        product_name: '手机'
                    },
                    {
                        id: 2,
                        product_name: '平板'
                    },
                    {
                        id: 3,
                        product_name: '电脑'
                    }
                ]
            }
        },
        methods: {
            test () {
                // 这里直接赋值给对象
                let tmpArr = this.productLists
                // 虽然这里删除tmpArr数组下表为1的，也就是id为2的数组，但是this.productLists也会删除，所以前面赋值不是真正的复制this.productLists，只是把this.productLists的引用地址赋值给变量，所以改变量也会导致另一方数据也会同时被修改
                tmpArr.splice(1, 1)
            }
        }
        
    }
</script>

 

解决方法：

<script>
    export default {
        data () {
            return {
                productLists: [
                    {
                        id: 1,
                        product_name: '手机'
                    },
                    {
                        id: 2,
                        product_name: '平板'
                    },
                    {
                        id: 3,
                        product_name: '电脑'
                    }
                ]
            }
        },
        methods: {
            test () {
                // 这里先把this.productLists转成JSON字符串，然后在转成JavaScript对象
                let tmpArr = JSON.parse(JSON.stringify(this.productLists))
                // 这样就不会影响到this.productLists
                tmpArr.splice(1, 1)
            }
        }
    }
</script>

 

转载于:https://www.cnblogs.com/nonsec/p/9322359.html