A memory leak detection method, device and medium based on Vue framework

Abstract

The present invention discloses a memory leak detection method, device, and medium based on the Vue framework. These methods belong to the field of memory leak detection technology and are used to address the technical issues of existing memory leak solutions, which are unable to accurately identify and locate the source of memory leaks, fail to provide effective optimization strategies, and suffer from poor stability and performance of Vue.js applications. The method comprises: regularly acquiring memory usage data of a Vue application and monitoring the memory occupancy of the Vue application based on the memory usage data; reclaiming the memory of the Vue application when the memory occupancy exceeds a first preset threshold; performing memory leak detection on the Vue application using a memory analyzer; and, when a memory leak occurs, reclaiming orphaned objects in the Vue application to automatically repair the memory.

Description

Technical Field

[0001] The present invention relates to the technical field of memory leak detection, and in particular to a memory leak detection method, device and medium based on a Vue framework. Background Art

[0002] With the continuous advancement of internet technology, single-page applications (SPAs) have become a mainstream trend in modern web development, offering excellent user experience and fast page responsiveness. Against this backdrop, Vue.js, a lightweight, efficient, and easy-to-use front-end development framework, has rapidly gained widespread attention and adoption. Vue.js significantly simplifies the development of complex web applications through its unique responsive data binding and component-based system.

[0003] However, as Vue.js applications scale and component complexity increases, a series of memory management issues have gradually become prominent. Excessive memory usage and memory leaks, especially when applications run for extended periods or process large amounts of data, pose significant challenges for developers. Memory leaks often stem from a variety of factors, including undeleted event listeners, responsive data objects, and complex dependencies between components. These unreleased memory resources can cause the application's memory usage to continue to climb, leading to degraded page performance, slower responsiveness, and even possible application crashes.

[0004] Unfortunately, the existing Vue.js framework doesn't offer dedicated optimizations for memory management. Developers are often forced to rely on the browser's native garbage collection mechanism to manage memory. However, browser garbage collection mechanisms are typically based on generic memory management strategies, making them ineffective in addressing memory leaks specific to Vue.js applications. For example, Vue.js's responsiveness and component lifecycle management introduce specific memory usage patterns that may exceed the browser's garbage collection capabilities.

[0005] Therefore, there is an urgent need for a solution that can intelligently detect and optimize memory leaks in the Vue.js framework. This solution requires a deep understanding of Vue.js's memory usage characteristics, the ability to accurately identify and locate the source of memory leaks, and the provision of effective optimization strategies to reduce the burden on developers and improve the stability and performance of Vue.js applications. Summary of the Invention

[0006] Embodiments of the present invention provide a memory leak detection method, device, and medium based on the Vue framework, which are used to solve the following technical problems: existing memory leak solutions cannot accurately identify and locate the source of memory leaks, cannot provide effective optimization strategies, and the stability and performance of Vue.js applications are poor.

[0007] The embodiment of the present invention adopts the following technical solutions:

[0008] In one aspect, an embodiment of the present invention provides a memory leak detection method based on a Vue framework, the method comprising: regularly acquiring memory usage data of a Vue application, and monitoring the memory occupancy of the Vue application based on the memory usage data;

[0009] When the memory usage exceeds a first preset threshold, reclaiming the memory of the Vue application;

[0010] Perform memory leak detection on the Vue application using a memory analyzer;

[0011] When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0012] In a feasible implementation, before periodically obtaining memory usage data of a Vue application and monitoring memory usage of the Vue application based on the memory usage data, the method further includes:

[0013] Create a memory pool containing commonly used objects in the Vue application;

[0014] Mark all objects in the memory pool as reusable objects through Map or WeakMap, so that the reusable objects are pushed back into the memory pool when they are no longer used instead of being destroyed;

[0015] Setting the maximum capacity of the memory pool; when the objects in the memory pool reach the maximum capacity, eliminating the object that has not been used for the longest time;

[0016] For each object in the memory pool, add a flag to determine whether it is in the reuse state; if the object is marked as reused, the object can be reused without being recreated;

[0017] By setting a scheduled task or using setTimeout, objects in the memory pool that have exceeded their life cycle are regularly cleaned up.

[0018] In a feasible implementation, periodically obtaining memory usage data of a Vue application and monitoring the memory usage of the Vue application based on the memory usage data specifically includes:

[0019] Regularly obtain the memory usage data of the Vue application through the browser's window.performance.memory interface;

[0020] Obtaining the occupancy of JavaScript heap memory from the memory usage data; the JavaScript heap memory stores all JavaScript objects and data;

[0021] By using an integrated memory analysis tool, the changes in the memory usage data are tracked to obtain memory usage change data, thereby realizing the memory occupancy monitoring.

[0022] In a feasible implementation, when the memory usage exceeds a first preset threshold, memory recycling is performed on the memory of the Vue application, specifically including:

[0023] When the memory usage of the JavaScript heap memory of the Vue application exceeds a first preset threshold, triggering a memory recycling mechanism; wherein the first preset threshold is determined according to the maximum memory limit of the browser;

[0024] Based on the memory recycling mechanism, the memory of the Vue application is recycled.

[0025] In a feasible implementation, based on the memory recycling mechanism, memory recycling is performed on the memory of the Vue application, specifically including:

[0026] Based on the object state in the Vue component, the objects in the smart tag Vue component whose memory can be recycled are in a state to be destroyed; wherein, the objects include at least event listeners, responsive data and asynchronous tasks;

[0027] In the beforeDestroy lifecycle hook of the Vue component, all resources marked as to be destroyed in the component are checked and cleaned up through a unified recycling function, and all event listeners are unbound.

[0028] In a feasible implementation, memory leak detection is performed on the Vue application through a memory analyzer. When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair, specifically including:

[0029] Regularly use the browser's built-in memory analyzer to check the memory changes of the Vue application and check whether there are objects in the destroyed state that have not been destroyed; if so, it is determined that the Vue application has a memory leak;

[0030] When a memory leak occurs, a weak reference is made to each dynamically created object of the Vue application through a weak reference data structure, and the dynamically created objects are regularly scanned to see if they are in an isolated state. If so, the destruction operation is automatically triggered.

[0031] In a feasible embodiment, the method further includes:

[0032] In the beforeDestroy lifecycle hook of the Vue component, add an external resource cleanup module to clean up the responsive data and event bindings within the Vue framework while cleaning up external resources;

[0033] Add a memory management function module to each Vue component to automatically clean up related resources when the Vue component is destroyed;

[0034] Automatically unbind global event listeners and global state management when the Vue component is destroyed to free up memory in time.

[0035] In a feasible embodiment, the method further includes:

[0036] When a page is initially loaded, page data is loaded using an on-demand loading method to reduce memory usage; wherein the on-demand loading method includes at least: paging loading, batch loading, rolling loading, and lazy loading;

[0037] Use the IntersectionObserver API to monitor whether the Vue component enters the page viewport; when the Vue component enters the page viewport, start loading the component to implement the Vue component lazy loading mechanism;

[0038] The routing component of Vue Router is loaded through asynchronous component loading. When the user visits a certain route, the routing component of the route is loaded to implement the routing lazy loading mechanism.

[0039] On the other hand, an embodiment of the present invention also provides a memory leak detection device based on the Vue framework, the device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions that can be executed by the at least one processor so that the at least one processor can execute the memory leak detection method based on the Vue framework.

[0040] Finally, an embodiment of the present invention also provides a storage medium, which is a non-volatile computer-readable storage medium. The non-volatile computer-readable storage medium stores at least one program, each of which includes instructions. When the instructions are executed by the terminal, the terminal executes the memory leak detection method based on the Vue framework.

[0041] Compared with the prior art, the memory leak detection method, device, and medium based on the Vue framework provided by the embodiments of the present invention have the following beneficial effects:

[0042] The memory leak detection and optimization method under the Vue framework provided by the present invention can effectively reduce memory leaks in Vue front-end applications and improve application performance and stability. Memory leaks are avoided by automatically detecting and cleaning up useless objects and resources. At the same time, memory pool management, lazy loading and on-demand loading technologies are used to reduce memory usage and improve page loading speed and responsiveness. Intelligent garbage collection and automatic repair mechanisms ensure the memory efficiency of the application during long-term operation, reducing the risk of crashes or freezes. In addition, memory leak detection and automatic repair tools help developers quickly locate problems and improve development efficiency. This solution is suitable for large-scale, data-intensive applications, and can effectively deal with memory management issues in low-memory devices and high-concurrency environments, optimizing user experience and application stability. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments described in the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0044] Figure 1 A flow chart of a memory leak detection method based on the Vue framework provided by an embodiment of the present invention;

[0045] Figure 2 A schematic structural diagram of a memory leak detection device based on the Vue framework provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0046] In order to enable those skilled in the art to better understand the technical solutions of the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0047] The embodiment of the present invention provides a memory leak detection method based on the Vue framework, such as Figure 1 As shown, the memory leak detection method based on the Vue framework specifically includes steps S101-S104:

[0048] S101. Regularly obtain memory usage data of the Vue application, and monitor the memory usage of the Vue application based on the memory usage data.

[0049] Specifically, to optimize the memory management of Vue applications, the present invention reduces the overhead of memory allocation and memory recycling by object reuse. The specific implementation steps are as follows:

[0050] First, create a memory pool that contains commonly used objects in the Vue application; then use Map or WeakMap to mark all objects in the memory pool as reusable objects, so that when reusable objects are no longer used, they will be pushed back to the memory pool instead of being destroyed.

[0051] At the same time, the maximum capacity of the memory pool is set; when the objects in the memory pool reach the maximum capacity, the objects that have not been used for the longest time are eliminated; for each object in the memory pool, a flag is added to determine whether it is in the reuse state; if the object is marked as reused, the object can be reused without being recreated.

[0052] Furthermore, by setting a scheduled task or using setTimeout, objects in the memory pool that have exceeded their life cycle can be regularly cleaned up.

[0053] As a feasible implementation method, a memory pool is created for frequently used Vue components, objects, or data. Objects in the pool are cached and marked as reusable objects through Map or WeakMap. Whenever components or data are no longer used, they are pushed back into the memory pool instead of being destroyed. Furthermore, objects that are created frequently but have a short life cycle (such as form data, chart configuration, etc.) are reused through the memory pool. This reduces the memory allocation overhead each time a new object is created. Furthermore, the maximum capacity of the memory pool is set. When the objects in the pool reach the maximum capacity, the LRU (Least Recently Used) or FIFO (First In First Out) strategy is used to eliminate the least recently used objects. For each object, a flag is added to determine whether it is in a reused state. If the object is marked as reused, it means that it has been cached in the memory pool and can be reused without being recreated. Furthermore, invalid objects in the pool are cleaned up regularly. Objects that have exceeded their life cycle can be cleaned up regularly in the pool by setting a scheduled task or using setTimeout.

[0054] After creating the memory pool, we periodically retrieve the Vue app's memory usage data through the browser's window.performance.memory API. We then retrieve the JavaScript heap memory usage from this memory usage data; the JavaScript heap memory stores all JavaScript objects and data.

[0055] Furthermore, through the integrated memory analysis tool, the changes in memory usage data are tracked, memory usage change data is obtained, and memory usage monitoring is achieved.

[0056] As a viable implementation, use the browser's window.performance.memory interface (for browsers that support it) to periodically retrieve memory usage data. Regularly evaluate JavaScript heap memory usage, paying particular attention to "jsHeap" memory (i.e., JS heap memory), which stores all JavaScript objects and data. When memory usage exceeds a set threshold, trigger a memory reclamation operation. The threshold can be dynamically set based on the browser's maximum memory limit (such as navigator.deviceMemory) to avoid memory overflows. Furthermore, integrate third-party memory profiling tools, such as Chrome DevTools Profiler, to accurately track memory changes.

[0057] S102: When the memory usage exceeds a first preset threshold, reclaim the memory of the Vue application.

[0058] Specifically, when the memory usage of the JavaScript heap memory of the Vue application exceeds a first preset threshold, the memory recycling mechanism is triggered; wherein the first preset threshold is determined according to the maximum memory limit of the browser.

[0059] Furthermore, based on the memory recycling mechanism, the memory of the Vue application is recycled, specifically including:

[0060] Based on the state of objects in a Vue component, it intelligently marks objects in the component that are eligible for memory recycling as pending destruction. These objects include at least event listeners, responsive data, and asynchronous tasks. Then, in the Vue component's beforeDestroy lifecycle hook, a unified recycling function is used to check and clean up all resources marked as pending destruction in the component and unbind all event listeners.

[0061] As a viable implementation, memory recycling is triggered when memory usage exceeds a set threshold. This threshold can be dynamically set based on the browser's maximum memory limit (e.g., navigator.deviceMemory) to prevent memory overflows. Third-party memory profiling tools, such as Chrome DevTools Profiler, are integrated to accurately track memory changes. Garbage collection mechanisms are then enhanced and integrated with the Vue lifecycle to ensure that unused objects and data are recycled at the appropriate time. The implementation process is as follows:

[0062] Smart recycling mark: During the Vue component destruction phase, all event listeners, responsive data, asynchronous tasks (such as network requests), etc. in the component are automatically marked as pending destruction.

[0063] Automatic recycling process: In Vue's beforeDestroy lifecycle hook, a unified recycling function checks and cleans up all resources in the component (event listeners, observers, etc.). It then unbinds all event listeners to ensure that no unnecessary memory is occupied.

[0064] For Vuex state management, ensure that the module state is cleared in time when the store module is destroyed to avoid state management taking up too much memory.

[0065] Finally, we optimized the memory cleanup process by integrating with the browser's garbage collector. We regularly checked the memory status of unused objects, marking and clearing useless data in advance. We also created a regular memory scan task to periodically assess whether orphaned objects on the page could be cleaned up.

[0066] S103. Detect memory leaks in the Vue application using a memory analyzer.

[0067] Specifically, the browser's built-in memory analyzer is used regularly to check the memory changes of the Vue application and to check whether any objects in the destroyed state are not destroyed; if so, it is determined that a memory leak occurs in the Vue application.

[0068] As a feasible implementation method, first, use development-time memory analysis tools (such as why-did-you-render) to detect the re-rendering of Vue components during the development process, detect unnecessary re-rendering and optimize it.

[0069] Regularly check memory changes using a browser's built-in memory profiler (such as Chrome DevTools) to check if any objects are not being destroyed in a timely manner.

[0070] Create a regular check mechanism to detect potential reference chain issues, report, and fix leaks. Then, combine it with the requestIdleCallback API to automatically initiate memory cleanup during browser idle time. This API performs asynchronous memory cleanup during browser idle time to avoid affecting page rendering.

[0071] Further implement memory usage warning, and when memory usage exceeds a certain threshold, start memory compression and cleanup strategy.

[0072] S104. When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0073] Specifically, when a memory leak occurs, a weak reference is made to each dynamically created object of the Vue application through a weak reference data structure, and the dynamically created objects are regularly scanned to see if they are in an isolated state. If so, the destruction operation is automatically triggered.

[0074] As a feasible implementation method, weak reference data structures such as WeakMap and WeakSet are used to track dynamically created objects. Weak references ensure that these objects can be reclaimed by the garbage collection mechanism when they are no longer referenced, without occupying memory for a long time.

[0075] Furthermore, the present invention optimizes the life cycle of Vue components to ensure that each component can completely clean up related memory and resources when it is destroyed. The implementation is as follows:

[0076] In the beforeDestroy lifecycle hook of the Vue component, add an external resource cleanup module to clean up the responsive data and event bindings inside the Vue framework while cleaning up external resources.

[0077] Add a memory management module to each Vue component to automatically clean up related resources when the Vue component is destroyed. Automatically unbind global event listeners and global state management when the Vue component is destroyed to free up memory in a timely manner.

[0078] As a feasible implementation method, memory cleanup hook: add additional cleanup steps in the beforeDestroy and destroyed hooks. In addition to cleaning up the responsive data and event bindings within the Vue framework, external resources such as API requests, timers, WebSocket connections, etc. must also be cleaned up. Add a "memory management" function module to each component to automatically clean up related resources when it is destroyed to ensure that memory will not leak due to problems such as event listeners not being unbound or data not being cleaned up. At the same time, optimize Vue's responsive system to avoid unnecessary data observation and rendering. For large data sets or complex objects, use lazy loading or lazy initialization to convert data to responsive only when needed. Further adopt shallow responsive technologies such as shallowReactive and shallowRef to avoid deep observation of the entire complex object. For global event listeners (such as window, document) and global state management (such as Vuex), automatically unbind when the component is destroyed to ensure that global resources do not occupy memory for a long time.

[0079] Furthermore, the present invention also reduces memory usage during initialization and improves application performance by loading data and components on demand. The specific implementation is as follows:

[0080] When a page is initially loaded, page data is loaded on demand to reduce memory usage; the on-demand loading methods include at least: page loading, batch loading, scrolling loading, and lazy loading.

[0081] Furthermore, the IntersectionObserver API is used to monitor whether the Vue component enters the page viewport; when it is detected that the Vue component enters the page viewport, the component is loaded again to implement the Vue component lazy loading mechanism.

[0082] Furthermore, the routing component of Vue Router is loaded through asynchronous component loading. When the user visits a certain route, the routing component of the route is loaded to implement the routing lazy loading mechanism.

[0083] As a viable implementation, a lazy loading mechanism uses the IntersectionObserver API to monitor whether a component or resource enters the viewport, loading it only when the user scrolls to that component, avoiding the need to load too many resources all at once. For Vue components, dynamic import (import()) technology is used to load components on demand. For example, a complex chart component on a page is only loaded when the user visits the page, reducing initial memory consumption.

[0084] Lazy loading of routes: For Vue Router's route components, asynchronous component loading is used (Vue.component('AsyncComponent', () =>import('path / to / component'))). When the user visits a route, the relevant components of the route are loaded, avoiding loading all components at once when the page loads.

[0085] Load data on demand: Avoid loading all data when the page first loads. Use paging, scrolling, lazy loading, and other methods to load data on demand. For large data sets, use batch loading technology to load and display data in stages to reduce memory usage.

[0086] In addition, the embodiment of the present invention also provides a memory leak detection device based on the Vue framework, such as Figure 2 As shown in the figure, the memory leak detection equipment based on the Vue framework specifically includes:

[0087] at least one processor; and a memory communicatively connected to the at least one processor; wherein,

[0088] The memory stores instructions executable by at least one processor, so as to enable the at least one processor to perform:

[0089] Regularly obtain memory usage data of the Vue application, and monitor the memory occupancy of the Vue application based on the memory usage data;

[0090] When the memory usage exceeds a first preset threshold, reclaiming the memory of the Vue application;

[0091] Perform memory leak detection on the Vue application using a memory analyzer;

[0092] When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0093] Finally, an embodiment of the present invention further provides a storage medium, which is a non-volatile computer-readable storage medium. The non-volatile computer-readable storage medium stores at least one program, each of which includes instructions. When the instructions are executed by a terminal, the terminal executes:

[0094] Regularly obtain memory usage data of the Vue application, and monitor the memory occupancy of the Vue application based on the memory usage data;

[0095] When the memory usage exceeds a first preset threshold, reclaiming the memory of the Vue application;

[0096] Perform memory leak detection on the Vue application using a memory analyzer;

[0097] When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0098] The various embodiments of the present invention are described in a progressive manner. Similar portions between the various embodiments can be referenced to each other, and each embodiment focuses on the differences from the other embodiments. In particular, the device, apparatus, and non-volatile computer storage medium embodiments are generally similar to the method embodiments, so their descriptions are simplified. For relevant details, refer to the descriptions of the method embodiments.

[0099] The above description of specific embodiments of the present invention is provided. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or sequential order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0100] The foregoing is merely an embodiment of the present invention and is not intended to limit the present invention. It will be apparent to those skilled in the art that various modifications and variations may be made to the embodiments of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. A memory leak detection method based on the Vue framework, characterized in that: The method comprises: Create a memory pool containing commonly used objects in the Vue application; Mark all objects in the memory pool as reusable objects through Map or WeakMap, so that the reusable objects are pushed back into the memory pool when they are no longer used instead of being destroyed; Setting the maximum capacity of the memory pool; when the objects in the memory pool reach the maximum capacity, eliminating the object that has not been used for the longest time; For each object in the memory pool, add a flag to determine whether it is in the reuse state; if the object is marked as reused, the object can be reused without being recreated; By setting a timer task or using setTimeout, regularly clean up objects in the memory pool that have exceeded their life cycle; Regularly obtain memory usage data of the Vue application, and monitor the memory occupancy of the Vue application based on the memory usage data; When the memory usage exceeds a first preset threshold, reclaiming the memory of the Vue application; Perform memory leak detection on the Vue application using a memory analyzer; When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

2. A memory leak detection method based on the Vue framework according to claim 1, characterized in that, Regularly obtain memory usage data of the Vue application and monitor the memory usage of the Vue application based on the memory usage data, specifically including: Regularly obtain the memory usage data of the Vue application through the browser's window.performance.memory interface; Obtaining the occupancy of JavaScript heap memory from the memory usage data; the JavaScript heap memory stores all JavaScript objects and data; By using an integrated memory analysis tool, the changes in the memory usage data are tracked to obtain memory usage change data, thereby realizing the memory occupancy monitoring.

3. A memory leak detection method based on Vue framework according to claim 1, characterized in that, When the memory usage exceeds a first preset threshold, memory recycling is performed on the memory of the Vue application, specifically including: When the memory usage of the JavaScript heap memory of the Vue application exceeds a first preset threshold, triggering a memory recycling mechanism; wherein the first preset threshold is determined according to the maximum memory limit of the browser; Based on the memory recycling mechanism, the memory of the Vue application is recycled.

4. A memory leak detection method based on Vue framework according to claim 3, characterized in that, Based on the memory recycling mechanism, the memory of the Vue application is recycled, specifically including: Based on the object state in the Vue component, the objects in the smart tag Vue component whose memory can be recycled are in a state to be destroyed; wherein, the objects include at least event listeners, responsive data and asynchronous tasks; In the beforeDestroy lifecycle hook of the Vue component, all resources marked as to be destroyed in the component are checked and cleaned up through a unified recycling function, and all event listeners are unbound.

5. A memory leak detection method based on Vue framework according to claim 1, characterized in that, Memory leak detection is performed on the Vue application using a memory analyzer. When a memory leak occurs, isolated objects in the Vue application are recycled to automatically repair the memory, specifically including: Regularly use the browser's built-in memory analyzer to check the memory changes of the Vue application and check whether there are objects in the destroyed state that have not been destroyed; if so, it is determined that the Vue application has a memory leak; When a memory leak occurs, a weak reference is made to each dynamically created object of the Vue application through a weak reference data structure, and the dynamically created objects are regularly scanned to see if they are in an isolated state. If so, the destruction operation is automatically triggered.

6. A memory leak detection method based on Vue framework according to claim 1, characterized in that, The method further comprises: In the beforeDestroy lifecycle hook of the Vue component, add an external resource cleanup module to clean up the responsive data and event bindings within the Vue framework while cleaning up external resources; Add a memory management function module to each Vue component to automatically clean up related resources when the Vue component is destroyed; Automatically unbind global event listeners and global state management when the Vue component is destroyed to free up memory in time.

7. A memory leak detection method based on Vue framework according to claim 1, characterized in that, The method further comprises: When a page is initially loaded, page data is loaded using an on-demand loading method to reduce memory usage; wherein the on-demand loading method includes at least: paging loading, batch loading, rolling loading, and lazy loading; Use the IntersectionObserver API to monitor whether the Vue component enters the page viewport; when the Vue component enters the page viewport, start loading the component to implement the Vue component lazy loading mechanism; The routing component of Vue Router is loaded through asynchronous component loading. When the user visits a certain route, the routing component of the route is loaded to implement the routing lazy loading mechanism.

8. A memory leak detection device based on the Vue framework, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, so that the at least one processor can execute the memory leak detection method based on the Vue framework according to any one of claims 1-7.

9. A storage medium, characterized in that: The storage medium is a non-volatile computer-readable storage medium, which stores at least one program. Each of the programs includes instructions. When the instructions are executed by the terminal, the terminal executes the memory leak detection method based on the Vue framework according to any one of claims 1 to 7.

Images