_.cloneDeep & JSON deep copy bug

_.cloneDeep & JSON deep copy bug

_.cloneDeep & JSON deep copy bug

_.cloneDeep 导致，from 对象的嵌套层次太深了

stack overflow

GC 爆栈

<--- Last few GCs --->

[50036:0x102808000]   649268 ms: Mark-sweep 1126.8 (1285.7) -> 1126.8 (1239.7) MB, 330.1 / 0.0 ms  (average mu = 0.938, current mu = 0.000) last resort GC in old space requested
[50036:0x102808000]   649520 ms: Mark-sweep 1126.8 (1239.7) -> 1126.8 (1228.2) MB, 251.6 / 0.0 ms 

_.cloneDeep bug

_.cloneDeep crashed the page, without show error information ❌

// app.vue

export default {
    // name: 'app',
    watch: {
        $route (to, from) {
            if(from.path.includes('/list/')) {
                this.$oldRoute = _.cloneDeep(from);
                console.log('from', from);
                console.log('this.$oldRoute', this.$oldRoute);
            }
        },
    },
    // ...
}

(JSON.parse & JSON.stringify) vanilla js , will show error information ✅

// app.vue

export default {
    // name: 'app',
    watch: {
        $route (to, from) {
            if(from.path.includes('/list/')) {
                this.$oldRoute = JSON.parse(JSON.stringify(from));
                console.log('from', from);
                console.log('this.$oldRoute', this.$oldRoute);
            }
        },
    },
    // ...
}

origin js

// app.vue

export default {
    // name: 'app',
    watch: {
        $route (to, from) {
            if(from.path.includes('/list/')) {
                // this.$oldRoute = _.cloneDeep(from);
                // this.$oldRoute = JSON.parse(JSON.stringify(from));
                this.$oldRoute = from;
                console.log('from', from);
                console.log('this.$oldRoute', this.$oldRoute);
            }
        },
    },
    // ...
}