Question

在我们的应用程序中，有大量数据填充（json〜630KB），这些数据消耗了chrome任务管理器中显示的219.28 MB JavaScript内存。

它从api加载数据，并使用vuex存储数据并递归生成菜单。

由于它是一个大型应用程序，因此我通过加载100000条记录来了解内存利用率的工作原理，从而通过示例vue.js应用程序模拟了相同的行为。

每次单击“运行测试”，任务管理器都会消耗200 MB内存，并且即使刷新页面也不会释放这么多时间。

我试图使用“ beforeDestroy”钩子从vuex清除对象，但是它不起作用。我想知道数据本身是否会导致性能降低或可以进行其他任何改进。

<html>
<head>
</head>
<body>
    <div id="myApp">
        <button @click="setCounterModule()">Counter</button>
        <button @click="setCustomersModule">Customers</button>
        <br />
        <br />
        <div>
            <button-counter v-if="currentModule=='counter'"></button-counter>
            <customers v-else></customers>
        </div>
    </div>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <script>
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    });

    Vue.component('customers', {
        computed: {
            customers() {
                return store.state.customers
            }
        },
        template: '<div><button @click="testMe" :disabled="loading">Run Test</button><div v-for="c in customers">{{ c.name }}</div></div>',
        data: function() {
            return {
                loading: false
            }
        },
        methods: {
            testMe: function () {
                this.loading = true;
                let customers = [];
                for (var i=0; i < 100000; i++) {
                    let customer = {'name': 'John' +i, 'address': 'Addr' + i};
                    customers.push(customer);
                }
                store.commit('assignCustomers', customers);
                this.loading = false;
            }
        },
        beforeDestroy() {
            // console.log('vuex destroyed');
            // store.commit('assignCustomers', null);
        }
    });

    const store = new Vuex.Store({
        state: {
            customers: null
        },
        mutations: {
            assignCustomers (state, customers) {
               state.customers = customers;
            }
        }
    });
    var app =  new Vue( {
        el: "#myApp",
        data: function() {
            return {
                currentModule: "counter"
            }
        },
        methods: {
            setCounterModule: function() {
                this.currentModule = "counter";
            },
            setCustomersModule: function() {
                this.currentModule = "customers";
            }
        }
    });
    </script>
</body>
</html>

改善Vue.js应用程序的性能

0 个答案: