Page component instance management method and device and medium

Abstract

The invention discloses a page component instance management method and device and a medium, and the method comprises the steps: constructing a Vue component through JSX grammar, generating a conditional variable of a keep-alive component in the Vue component, and storing the conditional variable in a global state management tool; performing responsive monitoring on the condition variable through each page component in the page component database; when it is monitored that the first page is switched to the second page, a keep-alive component is started; according to the route of the second page and the total number of instances contained in all the components of the second page, controlling each page component instance in the second page to be recreated and / or destroyed; and according to the keep-alive component, caching the second page of the re-created instance in a Vue component. According to the technical scheme of the invention, the condition variable is set for the keep-alive component, so that the cache activation of the keep-alive is dynamically controlled, the system performance is optimized, and the memory occupation is reduced. And in combination with the page routing and the page instance threshold, creation and destruction of instances in the page component are dynamically controlled, and the mental burden of developers is reduced.

Description

Technical Field

[0001] The present application relates to the field of computer software development, and in particular to a page component instance management method, device and medium. Background Art

[0002] In the software development industry, especially the front-end development industry, charts are widely used in data visualization or low-code code projects. In chart applications, dynamic changes of page component instances are very common.

[0003] Currently, for application scenarios where new pages are switched, since the new pages are not cached, developers need to manually create chart instances and timers for the new pages when page components are activated, and need to manually set the destruction operations of chart instances and timers in advance. However, this operation is not friendly to front-end development. Manual creation and destruction of too many page component instances are not timely, which can easily cause page freezes and memory leaks. In addition, manual creation and destruction of page component instances are too slow, resulting in system performance degradation. Summary of the invention

[0004] The embodiments of the present application provide a page component instance management method, device and medium, which are used to solve the problems of page freeze, memory leakage and system performance degradation caused by manual management of page component instances in front-end development.

[0005] The present application embodiment adopts the following technical solutions:

[0006] On the one hand, an embodiment of the present application provides a method for managing a page component instance, the method comprising:

[0007] Construct a Vue component through JSX syntax, generate conditional variables of the keep-alive component in the Vue component, and store the conditional variables in the global state management tool; responsively listen to the conditional variables through each page component in the page component database; start the keep-alive component when listening to the switch from the first page to the second page; control the recreation and / or instance destruction of each page component instance in the second page according to the route of the second page and the total number of instances contained in all components of the second page; according to the keep-alive component, cache the recreated instance of the second page in the Vue component.

[0008] In an example, based on the route of the second page and the total number of instances included in all components of the second page, the instance of each page component in the second page is controlled to be recreated, specifically including: determining whether the route of the second page is in the route cache list of the global state management tool, and comparing the total number of instances included in all components of the second page with the instance number threshold of the Vue component; if the route of the second page is in the route cache list and the total number of instances is not greater than the instance number threshold, recreating the instance of each page component in the second page.

[0009] In one example, the method further includes: if the route of the second page is in the route cache list and the total number of instances is greater than the instance number threshold, determining the page that was cached earliest in the Vue component; in the Vue component, destroying the page component that was cached earliest, and recreating the instance of each page component in the second page.

[0010] In one example, the method further includes: if the route of the second page is not in the route cache list, destroying the instance of each page component in the second page.

[0011] In one example, determining the earliest cached page in the Vue component specifically includes: determining the earliest cached page in the Vue component according to the page cache time recorded by an array variable in the Vue component; the array variable is used to store instances and page cache times other than timers.

[0012] In one example, after controlling the instance recreation and / or instance destruction of each page component in the second page based on the route of the second page and the total number of instances contained in all components of the second page, the method also includes: when the instance is recreated, storing the timer in the instance to the calling function variable of the Vue component; when the instance is destroyed, determining the target timer of the instance by traversing the timers in the calling function variable to perform a destruction operation on the target timer.

[0013] In one example, after monitoring the switching from the first page to the second page, the method further includes: retrieving the corresponding page component of the second page in the page component database; and switching the state of the corresponding page component from dormant to active.

[0014] In one example, after switching the state of the corresponding page component from dormant to active, the method further includes: performing a status check on the page components in the dormant state in the page component database; and recycling the page components whose dormant time is greater than the page component dormant time threshold.

[0015] On the other hand, an embodiment of the present application provides a page component instance management device, comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute any one of the above-mentioned page component instance management methods.

[0016] On the other hand, an embodiment of the present application provides a non-volatile computer storage medium for managing a page component instance, which stores computer executable instructions, and the computer executable instructions can execute any of the above-mentioned page component instance management methods.

[0017] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects:

[0018] This application sets conditional variables for keep-alive components to dynamically control cache activation of keep-alive components, making it easier to call components, ensuring uniform page effects, optimizing system performance, and reducing memory usage. In combination with page routing and page instance thresholds, it dynamically controls the creation and destruction of instances in page components, which ensures developer efficiency and reduces the amount of developer code on the development side. It also allows developers to not consider the status of currently created component instances or the status of created timers, greatly reducing the mental burden on developers. On the user side, the maximum number of instances allowed by the system can be customized according to the performance of the user's computer to optimize the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] In order to more clearly illustrate the technical solution of the present application, some embodiments of the present application will be described in detail below in conjunction with the accompanying drawings, in which:

[0020] Figure 1 A schematic diagram of a process flow of a page component instance management method provided in an embodiment of the present application;

[0021] Figure 2 A structural diagram of a page component instance management device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.

[0023] Some embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0024] Figure 1 A schematic diagram of a process flow of a page component instance management method provided in an embodiment of the present application. The method can be applied to different business fields. Certain input parameters or intermediate results in the process allow manual intervention and adjustment to help improve accuracy.

[0025] The analysis method involved in the embodiments of the present application may be implemented by a terminal device or a server, and the present application does not impose any special restrictions on this. For ease of understanding and description, the following embodiments are described in detail by taking a control system as an example.

[0026] It should be noted that:

[0027] JSX (JavaScript XML) is a syntax extension of JavaScript that combines the functionality of JavaScript with XML-like markup syntax. It is mainly used to describe the structure and appearance of the UI in React. It allows developers to directly write HTML-like tags in JavaScript code, making the code more intuitive and easier to understand, and making it easier for developers to describe the structure of UI components. JSX is also widely supported in Vue.js.

[0028] Based on this, Figure 1 The process in may include the following steps:

[0029] S101: construct a Vue component using JSX syntax, generate a conditional variable of a keep-alive component in the Vue component, and store the conditional variable in a global state management tool; the conditional variable is used to identify page information.

[0030] In some embodiments of the present application, a Vue component is constructed using JSX syntax, a page component constructor is returned, and a Dom structure is generated for the page component as a container box for the page component, wherein the constructed Vue component contains slots, array variables, calling function variables, and constructor static variables, wherein the role of the slot is to accommodate the Dom structure of the inserted page component; through the slot, the reusability and extensibility of the component are enhanced, so that the Vue component can easily adapt to the display requirements of different types of components without the need to write a separate component structure for each component.

[0031] The role of array variables is to store instances and page cache times other than timers; by setting array variables, subsequent instance management is greatly facilitated. When it is necessary to destroy component instances, by traversing this array, each component instance can be easily destroyed to ensure the timely release of resources. During page switching, this array can also be used to quickly locate and destroy related component instances to avoid memory leaks and improve system stability and performance.

[0032] The function variable is used to specifically receive and store the timer in the component instance, and can also store some more "resource-intensive" functions. By managing these functions in a unified way, developers can avoid the trouble of repeatedly writing and managing these functions in multiple places, reducing the complexity of the code. In addition, through function variables, components can uniformly process these active functions at the appropriate time (such as when the component is destroyed), such as clearing the timer, effectively reducing unnecessary performance consumption, improving the system's operating efficiency, and avoiding page freezes or exceptions caused by incorrect function processing.

[0033] The function of the static variable of the constructor is to limit the maximum number of component instances inside the Vue container. The parameter value is passed in when the user calls it. This setting enables the system to control the number of instances according to actual needs and the performance of the user's computer to avoid system freezes caused by too many instances. When the performance of the user's computer is limited, by setting a smaller maximum number of component instances, the system can be guaranteed to provide users with a smoother user experience under the premise of stable operation. This variable also facilitates developers to uniformly manage and optimize system resources, enhancing the universality and configurability of the system.

[0034] Furthermore, a conditional variable is set and generated for the keep-alive component in the Vue component, and the conditional variable is stored in the global state management tool, wherein the parameter value of the conditional variable is an array or string, which represents information that can identify the page, including but not limited to page tags, page names, page routes, etc. When the page is switched, the conditional variable is transformed into the page information of the completed switch, and the keep-alive component is started to cache the switched page.

[0035] It should be noted that keep-alive is a built-in component in Vue.js that caches the state of components to prevent them from being destroyed and recreated when switching. This can improve the performance of page switching, especially for complex components (such as components containing Echarts charts).

[0036] The global state management tool is a tool in Vue.js for centrally managing application state (such as Vuex). In this application, the conditional variable is stored in the global state management tool, which means that it is a global variable that all page components can access and modify. By storing conditional variables in the global state management tool, the system can achieve state sharing and synchronization across pages. For example, when a user switches from one page to another, the system can dynamically adjust the cache strategy based on the conditional variables in the global state management tool.

[0037] S102: Responsively monitor the conditional variable through each page component in the page component database, and start the keep-alive component when monitoring the switch from the first page to the second page; the first page refers to the page cached by the Vue component, and the second page refers to the page not cached by the Vue component.

[0038] In some embodiments of the present application, a page component database is pre-set to store page components of all pages; the conditional variables are responsively monitored by the page components in the page component database, and when the page switch is completed, the parameter value of the conditional variable is also responsively updated and transformed into the page information of the completed switch, and the keep-alive component is started to cache the switched page. For example: when page A switches to page B, the value of the conditional variable will be changed from the name of page A to the name of page B. Then the keep-alive component is started to cache page B.

[0039] It should be noted that when the first page is not the first page that has been cached in the Vue component, and the second page is a page that has not been cached in the Vue component, when switching from the first page to the second page, the system will first determine whether the second page can be cached. If it can be cached, the system will retrieve the corresponding page component of the second page in the page component database based on the update information of the conditional variable, and switch the state of the corresponding page component from dormant to active, and then create the corresponding page component of the second page, and start the keep-alive component to cache the switched second page.

[0040] When the first page is a non-first page that has been cached in the Vue component, and the second page is a non-first page that has been cached in the Vue component, when switching from the first page to the second page, the system will directly search for the cached second page component from the Vue component and read the cached second page component for page display.

[0041] When the first page is the first page to be cached in the Vue component, the system will first determine whether the first page can be cached. If it can be cached, the system will retrieve the corresponding page component of the first page in the page component database based on the update information of the conditional variable (updated from empty to the first page information), and switch the state of the corresponding page component from dormant to active, and then create the corresponding page component of the first page, and start the keep-alive component to cache the created first page.

[0042] Furthermore, after the state of the corresponding page component is switched from dormant to active, the state of the dormant page components in the page component database is checked, and the page components whose dormant time is longer than the dormant time threshold of the page component are recycled, so as to avoid redundant components occupying memory space and causing system performance degradation.

[0043] S103: Controlling instance re-creation and / or instance destruction of each page component in the second page according to the route of the second page and the total number of instances included in all components of the second page.

[0044] In some embodiments of the present application, when the page switch is completed, that is, when the first page switches to the second page, it is first determined whether the route of the second page is in the route cache list of the global state management tool, that is, whether it can be cached, and the total number of instances contained in all components of the second page is compared with the instance number threshold of the Vue component.

[0045] It should be noted that whether the page route is in the global state management tool is determined by the component's initialization process, based on its own business needs. For example, some specific page components, in order to share and manage the state between pages, store the current route in the global state management tool when they are created, so that other components can obtain and judge it easily.

[0046] Specifically, if the route of the second page is in the route cache list and the total number of instances is not greater than the instance number threshold, then the instance of each page component in the second page will be recreated; if the route of the second page is in the route cache list and the total number of instances is greater than the instance number threshold, then the page cached earliest in the Vue component will be determined, and then in the Vue component, the page component cached earliest will be destroyed, and the instance of each page component in the second page will be recreated; if the route of the second page is not in the route cache list, then the instance of each page component in the second page will be destroyed.

[0047] By judging whether the page route is in the global state management tool and setting the instance quantity threshold comparison method, the developer does not need to consider the state of the currently created component instance or the state of the created timer. On the development side, the developer's development efficiency can be guaranteed, the developer's code volume can be reduced, and the components can be more conveniently called to ensure the uniformity of the page effect. To a certain extent, it can greatly save the developer's mental burden and reduce the developer's development pressure. It can also ensure the universality of the system, greatly improve the system's operating efficiency, and reduce the system's useless overhead.

[0048] It should be noted that the system will determine the earliest cached page in the Vue component based on the page cache time recorded by the array variable in the Vue component.

[0049] S104: According to the keep-alive component, cache the page component of the recreated instance, so as to cache the second page in the Vue component.

[0050] In some embodiments of the present application, after the page component of the second page is recreated, the created page component will be cached in the Vue component. When switching to the second page next time, the page component of the second page will be directly searched and read from the Vue component for the page display of the second page. This reduces the workload of developers and makes the page effect more uniform.

[0051] It should be noted that when the instance is recreated, the timer in the instance will be stored in the calling function variable of the Vue component; when the instance is destroyed, the target timer of the instance is determined by traversing the timers in the calling function variable to perform the destruction operation on the target timer.

[0052] It should be noted that although the embodiments of the present application are based on Figure 1 Steps S101 to S104 are described in sequence, but this does not mean that steps S101 to S104 must be performed in a strict order. Figure 1 The order shown in the figure is to introduce and explain step S101 to step S104 in sequence, in order to facilitate those skilled in the art to understand the technical solution of the embodiment of the present application. In other words, in the embodiment of the present application, the order between step S101 to step S104 can be appropriately adjusted according to actual needs.

[0053] pass Figure 1By setting conditional variables for keep-alive components, dynamic control of cache activation of keep-alive components is achieved, and components can be called more conveniently to ensure uniform page effects, optimize system performance, and reduce memory usage. In combination with page routing and page instance thresholds, the creation and destruction of instances in page components can be dynamically controlled. On the development side, the developer's development efficiency can be guaranteed, the amount of developer code can be reduced, and developers do not need to consider the status of the currently created component instance or the status of the created timer, which greatly reduces the mental burden of developers. On the user side, the maximum number of instances allowed by the system can be customized according to the performance of the user's computer to optimize the user experience.

[0054] Figure 2 A schematic diagram of a page component instance management device provided in an embodiment of the present application includes:

[0055] at least one processor; and,

[0056] a memory communicatively connected to at least one processor; wherein,

[0057] The memory stores instructions that can be executed by at least one processor, and the instructions are executed by at least one processor so that the at least one processor can execute any one of the above-mentioned page component instance management methods.

[0058] Some embodiments of the present application provide a page component instance management non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions can execute any one of the above-mentioned page component instance management methods.

[0059] Each embodiment in this application 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 and 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.

[0060] The devices and media provided in the embodiments of the present application correspond one-to-one to the methods. Therefore, the devices and media also have similar beneficial technical effects as the corresponding methods. Since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media will not be repeated here.

[0061] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0062] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0063] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0064] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0065] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0066] Memory may include non-permanent storage in a computer-readable medium, random access memory (RAM), and non-volatile memory in the form of read-only memory (ROM) or flash RAM. Memory is an example of a computer-readable medium.

[0067] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0068] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0069] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the technical principle of the present application should fall within the protection scope of the present application.

Claims

1. A page component instance management method, characterized in that: The method comprises: Construct a Vue component through JSX syntax, generate a conditional variable of a keep-alive component in the Vue component, and store the conditional variable in a global state management tool; the conditional variable is used to identify page information; Responsively monitor the conditional variable through each page component in the page component database, and start the keep-alive component when monitoring a switch from the first page to the second page; the first page refers to a page cached by the Vue component, and the second page refers to a page not cached by the Vue component; Controlling instance re-creation and / or instance destruction of each page component in the second page according to the route of the second page and the total number of instances included in all components of the second page; According to the keep-alive component, the page component of the recreated instance is cached to cache the second page in the Vue component.

2. The method according to claim 1, characterized in that According to the route of the second page and the total number of instances of all components of the second page, the instance re-creation of each page component in the second page is controlled, including: Determine whether the route of the second page is in the route cache list of the global state management tool, and compare the total number of instances included in all components of the second page with the instance number threshold of the Vue component; If the route of the second page is in the route cache list and the total number of instances is not greater than the instance number threshold, recreate the instance of each page component in the second page.

3. The method according to claim 2, characterized in that The method further comprises: If the route of the second page is in the route cache list, and the total number of instances is greater than the instance number threshold, determine the earliest cached page in the Vue component; In the Vue component, the earliest cached page component is destroyed, and an instance of each page component in the second page is recreated.

4. The method according to claim 2, characterized in that: The method further comprises: If the route of the second page is not in the route cache list, destroy the instance of each page component in the second page.

5. The method according to claim 3, characterized in that: Determine the earliest cached page in the Vue component, including: According to the page cache time recorded by the array variable in the Vue component, the earliest cached page in the Vue component is determined; the array variable is used to store instances and page cache times other than the timer.

6. The method according to claim 1, characterized in that After controlling the instance re-creation and / or instance destruction of each page component in the second page according to the route of the second page and the total number of instances included in all components of the second page, the method further includes: When the instance is recreated, the timer in the instance is stored in the calling function variable of the Vue component; When the instance is destroyed, the target timer of the instance is determined by traversing the timers in the calling function variable, so as to perform a destruction operation on the target timer.

7. The method according to claim 1, characterized in that After monitoring the switching from the first page to the second page, the method further includes: Retrieving the corresponding page component of the second page from the page component database; Switch the state of the corresponding page component from dormant to active.

8. The method according to claim 7, characterized in that After switching the state of the corresponding page component from dormant to active, the method further includes: Performing status check on the page components in dormant state in the page component database; The page components whose sleep time is longer than the page component sleep time threshold are recycled.

9. A page component instance management device, characterized in that: include: at least one processor; as well as, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute a page component instance management method as described in any one of claims 1-8.

10. A page component instance management non-volatile computer storage medium storing computer executable instructions, characterized in that: The computer executable instructions can execute a page component instance management method as described in any one of claims 1-8.

Images