如何修复我的 vue.js / axios 应用程序中的内存泄漏？

Question

我有一个页面，它使用内联 vue.js 脚本显示表中的行列表，它会在页面加载时获取行列表，但也会在收到推送事件时再次获取表。

我有一个模式窗口，它打开并允许用户将新人添加到表中。当用户按下提交（在表单上）时，模式会发布一个 ajax 请求（使用 axios）来提交记录。这会向 Pusher 发送一个 App\Events\NewQueueMember 事件，我的 vue 应用程序也会监听该事件，当发生这种情况时，将调用 updateData 方法来刷新表。

我遇到的问题是提交表单时，页面在大约 5 秒钟内有些无响应，然后才能再次在页面上滚动。查看 Chromes 任务管理器，我可以看到选项卡的 RAM 使用量翻了一番，CPU 使用率也相当高。

我相信这是某种内存泄漏，但我不确定如何解决，希望得到一些指导。

这是驻留在我的模式中的表单。

@csrf 顾客姓名 名称将在内部显示给客户

<div class="form-group">
    <label for="add-person-mobile">Mobile Number</label>
    <input type="phone" class="form-control" name="phone_number" id="add-person-mobile"
           v-model="addPersonForm.phone_number">
    <small id="emailHelp" class="form-text text-muted">Please ensure number starts with +44 </small>
</div>

<div class="form-group">
    <label for="add-person-party-size">Party Size</label>
    <input type="number" class="form-control" name="party_size" id="add-person-party-size"
           v-model="addPersonForm.party_size">
</div>

这是同一页面内的站点的 vue.js 脚本块

<script>

    Vue.use(VueTimeago, {
        name: 'Timeago',
    })

    let vm = new Vue({
        el: '#app',

        data() {
            return {
                live_count: null,
                queue: null,
                loading: true,
                errored: false,
                buttons: {
                    add_to_queue_label: 'Add to Queue',
                    add_to_queue_disabled: false
                },
                addPersonForm: {
                    name: '',
                    phone_number: '',
                    party_size: ''
                }
            }
        },

        mounted() {
            axios
                .get(`/business/queue-live-feed`)
                .then(response => {
                    console.log('got response data')
                    console.log(response.data)
                    this.queue = response.data.queue
                    this.live_count = response.data.live_count
                })
                .catch(error => {
                    console.log(error)
                    this.errored = true
                })
                .finally(() => this.loading = false);
        },
        
        methods: {
            updateData: function () {
                axios.get(`/business/queue-live-feed`)
                    .then(response => {
                        this.queue = response.data.queue
                        this.live_count = response.data.live_count
                    })
                    .catch(error => {
                        console.log(error)
                        this.errored = true
                    });
            },

            addPerson: function (event) {
                console.log('calling resource...');
                this.buttons.add_to_queue_disabled = true;
                this.buttons.add_to_queue_label = "Adding...";

                axios.post(`/business/queue/add2`, this.$data.addPersonForm)
                    .then(response => {
                        console.log('got a response!');
                        console.log(response.data);
                        // this.updateData(); <- when I comment this line, the unresponsiveness lasts around 5-10 seconds.
                    })
                    .catch(error => {
                        console.log('some error happened :(')
                        this.buttons.add_to_queue_disabled = true;
                        this.buttons.add_to_queue_label = "Retry";
                        // $('#manual-add-people').modal('hide');
                        // console.log(error)
                    })
                    .finally(() => {
                        console.log('finished method');
                        this.buttons.add_to_queue_disabled = false;
                        this.buttons.add_to_queue_label = "Add to Queue";
                        $('#manual-add-people').modal('hide');
                    });

                this.addPersonForm = {};
            },

        }
    })


    // PUSHER CODE
    Pusher.logToConsole = true;

    const pusher = new Pusher('{{ env('PUSHER_APP_KEY') }}', {
        cluster: '{{ env('PUSHER_APP_CLUSTER') }}',
        authEndpoint: '/broadcasting/auth',
        auth: {
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            }
        }
    });

    pusher.subscribe(`private-queue.business.{{ $business_id }}`)
        .bind('App\\Events\\NewQueueMember', (data) => {
            vm.updateData()
        })
        .bind('App\\Events\\QueueMemberKicked', (data) => {
            vm.updateData()
        })
        .bind('App\\Events\\QueueMemberLeft', (data) => {
            vm.updateData()
        })
        .bind('App\\Events\\QueueMemberNoShow', (data) => {
            vm.updateData()
        })
    ;

</script>

有问题的方法是提交表单时调用的addPerson。

如果我将其切换为空数组，我认为该问题与我对 this.$data.addPersonForm 的使用有关。

编辑： 这是从我的/business/queue/add2 端点返回的示例响应。

{guest_id: 55, queue_lane_id: 1, party_size: 2, short_id: "RIS0MRk0",…}
business: {id: 2, name: "Acme Ltd", business_type_id: 2, is_active: 1,…}
business_id: 2
created_at: "2020-09-27T23:53:11.000000Z"
customer: null
guest: {id: 55, name: "AJAX Test 29", phone_number: "+1234567890", business_id: 2,…}
guest_id: 55
id: 79
party_size: 2
queue_entry_time: "2020-09-28 00:53:11"
queue_lane_id: 1
short_id: "RIS0MRk0"
updated_at: "2020-09-27T23:53:11.000000Z"

这只是一个 JSON blob，其中包含他们刚刚创建的记录的详细信息，也不是很大。

我还更新了上面的 Vue 脚本，以反映我在 addPerson 下的 then() 函数中进行的附加方法调用。

Answer 1

在 chrome 开发工具中，打开“性能”选项卡，点击记录，重复使一切变慢的问题，然后深入调用堆栈。 Vue 编译代码可能会使跟踪变得更加混乱。在这种情况下，chrome“Vue 开发工具”可能会有所帮助。

仅通过查看代码，我还将向 updateData() 函数添加两个不同的计数器和记录器 - 记录最初调用它的次数，然后记录 axios 返回的时间。如果函数导致问题时返回的数据不多，则推送器可能会在返回之前调用它太多次。您也可能会在开发工具的网络选项卡中看到这一点。