vue.js中數據引用后原數據被改變

 var vm = null,
        cateNature =
            [
                {
                    "attrId": "592e95a2e820cc1813f0ba4e",
                    "isMultiple": 1,
                    "seq": 0,
                    "isEnum": 1,
                    "attrName": "熱門游戲",
                    "isMustInput": 0,
                    "isShow": 1,
                    "attrValues": [
                        {
                            "seq": 0,
                            "isShow": 1,
                            "attrValueName": "英雄聯盟",
                            "attrValueId": "10000"
                        },

                    ]
                },
                {
                    "attrId": "592e95a2e820cc1813f0ba4f",
                    "isMultiple": 1,
                    "seq": 1,
                    "isEnum": 1,
                    "attrName": "服務類型",
                    "isMustInput": 0,
                    "isShow": 1,
                    "attrValues": [
                        {
                            "seq": 0,
                            "isShow": 1,
                            "attrValueName": "教玩",
                            "attrValueId": "10100"
                        },

                    ]
                }
            ];
    vm = new Vue({
        el: '#demo',
        data: {
            price: [],
            type: [],
            testData: [],
            subnatrue: [],
            cateNature: cateNature,

        }
    })

就這樣一個數據結構，當時做項目的時候遇見了一個問題，var了一個變量來接收改變data數據里面的cateNature數據：

var testdata = vm.cateNature;
然后操作testdata的時候原來的cateNature數據跟着變了，

后來查看vue數據綁定的時候才發現，因為最原始的的cateNature數據是一個數組或者對象，對於一個對象或者數組的時候他們等於是引用的地址是相同的所有就跟着變了；

后台繼續查找資料只要把數據來回轉化一下就可以的:
var testdata = JSON.parse(JSON.stringify(vm.cateNature));
這樣就可以了。

var testdata = JSON.parse(JSON.stringify(vm.cateNature));