Memory leak detection method and device based on Vue framework and medium

Abstract

The invention discloses a memory leak detection method and device based on a Vue framework and a medium, belongs to the technical field of memory leak detection, and is used for solving the technical problems that an existing memory leak solution cannot accurately identify and position a source of memory leak, cannot provide an effective optimization strategy and is poor in stability and performance of a Vue.js application. The method comprises the following steps: regularly obtaining memory usage data of a Vue application, and carrying out memory usage monitoring on the Vue application based on the memory usage data; when the memory occupancy exceeds a first preset threshold value, performing memory recovery on the memory of the Vue application; performing memory leak detection on the Vue application through a memory analyzer; and when memory leak occurs, recovering the isolated object in the Vue application so as 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 have become the mainstream trend of modern Web development due to their excellent user experience and fast page response capabilities. In this context, Vue.js, as a lightweight, efficient and easy-to-use front-end development framework, has quickly gained widespread attention and application. Vue.js greatly simplifies the development process of complex Web applications through its unique responsive data binding and componentization system.

[0003] However, as Vue.js applications grow in size and components become more complex, a series of memory management issues have become increasingly prominent. Especially when applications run for a long time or process large amounts of data, excessive memory usage and memory leaks become serious challenges for developers. Memory leaks usually stem from a variety of reasons, including event listeners that are not destroyed in time, responsive data objects, and complex dependencies between components. These unreleased memory resources can cause the application's memory usage to continue to rise, which in turn causes page performance degradation, slower response speeds, and may even cause the application to crash.

[0004] Unfortunately, the existing Vue.js framework does not provide specific optimization measures for memory management. Developers can only rely on the browser's native garbage collection mechanism to manage memory. However, the browser's garbage collection mechanism is usually based on a general memory management strategy, which is difficult to effectively deal with the memory leak problem unique to Vue.js applications. For example, the responsive system and component lifecycle management in Vue.js introduce specific memory usage patterns that may exceed the processing capabilities of the browser's garbage collection mechanism.

[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 the memory usage characteristics of Vue.js, 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] The embodiment of the present invention provides a memory leak detection method, device and medium based on the Vue framework, which are used to solve the following technical problems: the 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 solution: On the one hand, 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; When the memory usage exceeds a first preset threshold, reclaiming the memory of the Vue application; Perform memory leak detection 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.

[0008] In a feasible implementation manner, before periodically acquiring memory usage data of the Vue application and monitoring memory occupancy of the Vue application based on the memory usage data, the method further includes: Create a memory pool, which contains commonly used objects in the Vue application; Through Map or WeakMap, all objects in the memory pool are marked as reusable objects, so that the reusable objects are pushed back to 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 objects that have not been used for the longest time; For each object in the memory pool, add a flag to determine whether it is in reuse state; if the object is marked as reused, the object can be reused without re-creating; By setting a scheduled task or using setTimeout, objects in the memory pool that have exceeded their life cycle are regularly cleaned up.

[0009] In a feasible implementation, the memory usage data of the Vue application is periodically obtained, and the memory usage of the Vue application is monitored 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 the 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 achieving the memory occupancy monitoring.

[0010] 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: When the memory usage of the JavaScript heap memory of the Vue application exceeds a first preset threshold, a memory recycling mechanism is triggered; 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.

[0011] In a feasible implementation, based on the memory recycling mechanism, memory recycling is performed on the memory of the Vue application, specifically including: Based on the object state in the Vue component, the object in the smart tag Vue component whose memory can be recycled is in a state to be destroyed; wherein the object includes 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.

[0012] 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, which specifically includes: 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, a destruction operation is automatically triggered.

[0013] In a feasible implementation manner, the method further includes: 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; 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.

[0014] In a feasible implementation manner, the method further includes: When a page is initially loaded, the page data is loaded by on-demand loading 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. 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.

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

[0016] Compared with the prior art, the memory leak detection method, device and medium based on the Vue framework provided by the embodiment of the present invention have the following beneficial effects: The memory leak detection and optimization method under the Vue framework provided by the present invention can effectively reduce the memory leak phenomenon in the Vue front-end application and improve the 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 and reduce 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 problems in low-memory devices and high-concurrency environments, optimizing user experience and application stability. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] 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 use in the embodiments or the prior art descriptions. Obviously, the drawings described below are only some embodiments recorded in the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings: Figure 1 A flow chart of a memory leak detection method based on the Vue framework provided by an embodiment of the present invention; Figure 2 A schematic structural diagram of a memory leak detection device based on a Vue framework provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0018] In order to enable those skilled in the art to better understand the technical solutions in the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments 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 creative work should fall within the scope of protection of the present invention.

[0019] 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: 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.

[0020] Specifically, in order 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: 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.

[0021] 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 re-creating it.

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

[0023] As a feasible implementation, create a memory pool for commonly used Vue components, objects or data. Cache objects in the pool through Map or WeakMap and mark them as reusable objects. Whenever components or data are no longer used, they are pushed back to the memory pool instead of being destroyed. Further, for objects that are created frequently but have a short life cycle (such as form data, chart configuration, etc.), they are reused through the memory pool. Reduce the memory allocation overhead every time a new object is created. Further set the maximum capacity of the memory pool. When the objects in the pool reach the maximum capacity, use the LRU (Least Recently Used) or FIFO (First In First Out) strategy to eliminate the longest unused objects. For each object, add a flag to determine whether it is in a reused state. If the object is marked as a reused state, it means that it has been cached in the memory pool and can be reused without re-creating it. Further, regularly clean up invalid objects in the pool. You can set a scheduled task or use setTimeout to regularly clean up objects in the pool that have exceeded their life cycle.

[0024] Furthermore, after creating the memory pool, the memory usage data of the Vue application is obtained regularly through the browser's window.performance.memory interface. Then, the occupancy of the JavaScript heap memory is obtained from the memory usage data; the JavaScript heap memory stores all JavaScript objects and data.

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

[0026] As a feasible implementation, use the browser's window.performance.memory interface (for browsers that support this interface) to regularly obtain memory usage data. Regularly evaluate the usage of JavaScript heap memory, paying special attention to the "jsHeap" memory (i.e. JS heap memory), which stores all JavaScript objects and data. When the memory usage exceeds the set threshold, trigger the memory recycling operation. The threshold can be set dynamically according to the browser's maximum memory limit (such as navigator.deviceMemory) to avoid memory overflow. Furthermore, integrate third-party memory analysis tools, such as Chrome DevTools Profiler, to accurately track memory changes.

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

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

[0029] Furthermore, based on the memory recycling mechanism, the memory of the Vue application is recycled, including: Based on the object status in the Vue component, the objects in the Vue component that can be recycled are intelligently marked as pending destruction; the objects include at least event listeners, responsive data, and asynchronous tasks. Then, in the beforeDestroy lifecycle hook of the Vue component, all resources marked as pending destruction in the component are checked and cleaned up through a unified recycling function, and all event listeners are unbound.

[0030] As a feasible implementation method, when the memory usage exceeds the set threshold, the memory recycling operation is triggered. The threshold can be set dynamically according to the maximum memory limit of the browser (such as navigator.deviceMemory) to avoid memory overflow. And integrate third-party memory analysis tools, such as Chrome DevTools Profiler, to accurately track memory changes. Then enhance the garbage collection mechanism and combine it with the Vue life cycle to ensure that useless objects and data are recycled in time at the right time. The implementation process is as follows: Intelligent 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.

[0031] Automatic recycling process: In Vue's beforeDestroy lifecycle hook, a unified recycling function is used to check and clean up all resources in the component (event listeners, observers, etc.), and then unbind all event listeners to ensure that there is no unnecessary memory usage.

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

[0033] Finally, we combined the browser's garbage collector mechanism to optimize the memory cleanup process. We regularly checked the memory status of unused objects, marked and cleaned up useless data in advance, and created a regular memory scanning task to regularly evaluate whether orphaned objects in the page can be cleaned up.

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

[0035] Specifically, the built-in memory analyzer of the browser is used regularly to check the memory changes of the Vue application, and to 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.

[0036] 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.

[0037] 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.

[0038] Create a regular check mechanism to check for possible reference chain problems, report and fix leaks. Then combine the requestIdleCallback API to automatically start memory cleanup during browser idle time. Use this API to perform asynchronous memory cleanup during browser idle time to avoid affecting normal page rendering.

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

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

[0041] 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.

[0042] 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, and will not occupy memory for a long time.

[0043] Furthermore, the present invention also optimizes the life cycle of Vue components to ensure that each component can completely clean up related memory and resources when destroyed, and the implementation method is as follows: In the beforeDestroy lifecycle hook of the Vue component, add an external resource cleanup module to clean up external resources while cleaning up the responsive data and event bindings inside the Vue framework.

[0044] 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.

[0045] As a feasible implementation method, memory cleanup hook: add additional cleanup steps in beforeDestroy and destroyed hooks. In addition to cleaning up the responsive data and event bindings inside the Vue framework, external resources such as API requests, timers, WebSocket connections, etc. are also cleaned up. Add a "memory management" function module to each component to automatically clean up related resources when destroyed to ensure that memory will not leak due to problems such as event listeners not being unbound and 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, data is converted to responsive only when needed through lazy loading or lazy initialization. Further use 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.

[0046] 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: When a page is initially loaded, the page data is loaded by on-demand loading to reduce memory usage; the on-demand loading method includes at least: paging loading, batch loading, scrolling loading, and lazy loading.

[0047] 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 to implement the lazy loading mechanism of the Vue component.

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

[0049] As a feasible implementation, lazy loading mechanism: use IntersectionObserver API to monitor whether a component or resource enters the viewport, and start loading only when the user scrolls to the component, avoiding loading too many resources at one time. 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 memory consumption during initialization.

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

[0051] Load data on demand: Avoid loading all data when the page is first loaded. Use paging, scroll loading, lazy loading, etc. to load data on demand. For large data sets, use batch loading technology to load and display data in stages to reduce memory usage.

[0052] 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, the memory leak detection device based on the Vue framework specifically includes: at least one processor; and a memory in communication with the at least one processor; wherein, The memory stores instructions executable by at least one processor to enable the at least one processor to perform: 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 through a memory analyzer; When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0053] Finally, an embodiment of the present invention further provides a storage medium, which is a non-volatile computer-readable storage medium, and the non-volatile computer-readable storage medium stores at least one program, each of which includes instructions, and when the instructions are executed by a terminal, the terminal executes: 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 through a memory analyzer; When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

[0054] Each embodiment of the present invention is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device, equipment, and non-volatile computer storage medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiments.

[0055] The above describes specific embodiments of the present invention. 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.

[0056] The above description is only an embodiment of the present invention and is not intended to limit the present invention. For those skilled in the art, the embodiments of the present invention may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the embodiments of the present invention should be included in the protection scope of the present invention.

Claims

1. A memory leak detection method based on Vue framework, characterized in that: The method comprises: 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 through a memory analyzer; When a memory leak occurs, isolated objects in the Vue application are recycled to perform automatic memory repair.

2. According to a memory leak detection method based on Vue framework according to claim 1, it is characterized in that: Before periodically acquiring memory usage data of the Vue application and monitoring memory occupancy of the Vue application based on the memory usage data, the method further includes: Create a memory pool, which contains commonly used objects in the Vue application; Through Map or WeakMap, all objects in the memory pool are marked as reusable objects, so that the reusable objects are pushed back to 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 objects that have not been used for the longest time; For each object in the memory pool, add a flag to determine whether it is in reuse state; if the object is marked as reused, the object can be reused without re-creating; By setting a scheduled task or using setTimeout, objects in the memory pool that have exceeded their life cycle are regularly cleaned up.

3. According to a memory leak detection method based on Vue framework according to claim 1, it is characterized in that: Regularly obtain the 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 the 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 achieving the memory occupancy monitoring.

4. According to a memory leak detection method based on Vue framework according to claim 1, it is 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, a memory recycling mechanism is triggered; 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.

5. According to a memory leak detection method based on Vue framework according to claim 4, it is 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 object in the smart tag Vue component whose memory can be recycled is in a state to be destroyed; wherein the object includes 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.

6. According to a memory leak detection method based on Vue framework according to claim 1, it is characterized in that: The Vue application is tested for memory leaks by 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, a destruction operation is automatically triggered.

7. According to a memory leak detection method based on Vue framework according to claim 1, it is 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 inside 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.

8. According to a memory leak detection method based on Vue framework according to claim 1, it is characterized in that: The method further comprises: When a page is initially loaded, the page data is loaded by on-demand loading 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.

9. A memory leak detection device based on 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 a memory leak detection method based on a Vue framework according to any one of claims 1-8.

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

Images