A multi-scene-oriented VUE dynamic component interface configuration and rendering method
By automatically generating component layout parameters through feature extraction and encoding algorithms and a two-stage generative adversarial network, and combining priority queues and adaptive Gaussian rendering optimization, the problem of low efficiency in front-end interface development in multiple scenarios is solved, and efficient and stable component configuration and rendering are achieved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- 安徽一起吧科技有限公司
- Filing Date
- 2025-08-06
- Publication Date
- 2026-07-14
AI Technical Summary
Existing technologies struggle to achieve efficient, automated, and intelligent component configuration and rendering for front-end interfaces across multiple scenarios, resulting in low interface development efficiency, slow response speed, and susceptibility to errors.
The algorithm uses feature extraction and encoding to generate scene feature vectors. It automatically generates component layout parameters and rendering strategies through a two-stage generative adversarial network. Combined with priority queues, dependency topology sorting and adaptive Gaussian rendering optimization, it constructs a component loading queue and performs cache management to achieve automatic component configuration and efficient rendering.
It significantly improves the efficiency of interface development and maintenance, reduces resource consumption, improves interface response speed and operational stability, and has the advantages of intelligence and high performance.
Smart Images
Figure CN120910371B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of front-end interface development and dynamic rendering optimization technology, and in particular to a method for configuring and rendering Vue dynamic component interfaces for multiple scenarios. Background Technology
[0002] With the rapid development of internet applications, front-end interfaces need to adapt to multiple business scenarios and constantly changing user needs. Traditional static component configuration and manual rendering methods are insufficient to meet the practical requirements of multi-scenario reuse, efficient maintenance, and dynamic expansion. In existing technologies, component configuration relies on manual adjustments and lacks automation and intelligent mechanisms, resulting in low interface development efficiency, slow response speed, and susceptibility to errors.
[0003] Meanwhile, although current mainstream front-end frameworks support componentization and some asynchronous loading, they still have shortcomings in component layout optimization, dependency handling, resource scheduling, rendering efficiency improvement and cache management in multiple scenarios, and cannot achieve unified scheduling and high-performance rendering across scenarios.
[0004] Therefore, how to provide a VUE dynamic component interface configuration and rendering method that can be reused in multiple scenarios is a problem that urgently needs to be solved by those skilled in the art. Summary of the Invention
[0005] One objective of this invention is to propose a Vue dynamic component interface configuration and rendering method for multi-scenario reuse. This invention achieves automatic configuration, on-demand loading, and efficient rendering of interface components across multiple scenarios through feature extraction and encoding, a two-stage generative adversarial network, and an adaptive optimization mechanism. It can intelligently generate component layout and rendering strategies based on business needs and historical data, effectively improving development efficiency. By employing priority queues, dependency topology sorting, Gaussian rendering optimization, and cache management, resource consumption is reduced, and interface response speed and operational stability in complex scenarios are improved.
[0006] A method for configuring and rendering a Vue dynamic component interface for multi-scenario reuse according to an embodiment of the present invention includes the following steps:
[0007] It receives multi-scene configuration files, parses them using feature extraction and encoding algorithms, and generates scene feature vectors.
[0008] A two-stage generative adversarial network is constructed. The scene feature vector is input, and the generator outputs component layout parameters, resource priority and rendering strategy to form the generation parameters. The discriminator evaluates the effectiveness of the generation parameters and iteratively optimizes them until the generation parameters reach the preset standard to obtain the application parameters.
[0009] Based on application parameters, the asynchronous component loading method of the Vue framework is adopted. A component loading queue is created by dynamically importing APIs, and topological sorting is performed on dependent components. The loading queue adopts a priority queue.
[0010] An adaptive Gaussian algorithm is introduced to calculate the radius of the component's rendering area. The rendering area is dynamically divided based on the scene complexity coefficient and the rendering error threshold. At the same time, a bounding box optimization mechanism is used to eliminate invalid rendering calculations.
[0011] An optimized Diff algorithm is used to reduce the number of DOM operations by calculating the longest increasing subsequence of the new and old virtual DOM tree node sequences.
[0012] Build a component cache pool based on an eviction policy, set a limit on the number of components to be cached, and evict the least used components first when the cache overflows.
[0013] Furthermore, the multi-scenario configuration file supports JSON format, including:
[0014] Scene identification information: a unique identifier, name, and grouping tag for each business scene;
[0015] Component types: A list of components involved in each scenario, including basic components and composite components;
[0016] Attribute parameters: Configuration properties for each component, including initial values, state, style parameters, interaction events, and data source references;
[0017] Structural hierarchy: Nesting, parent-child, parallel, partitioning, column division, and grid layout relationships between components;
[0018] Dependency relationships: The relationships between components in terms of dependencies and data flow, including event linkage, data binding, and loading order constraints;
[0019] Historical configuration data: past configuration and usage records of scenarios or components, including user preferences, historical layout schemes, and interaction logs;
[0020] The scene identifier field is encoded as follows: the scene identifier field is hashed into binary code; the component type is numbered according to a predefined dictionary and the frequency is counted; the attribute parameters are processed by numerical normalization and one-hot encoding and then concatenated according to the mean; the structural hierarchy is obtained by tree traversal to obtain the depth and width numerical features; the dependency relationship is encoded in the form of an adjacency matrix and expanded into a one-dimensional vector; the historical configuration parameters are normalized and directly concatenated; all features are concatenated into a fixed-length vector in a fixed order and normalized as a whole to finally form the scene feature vector.
[0021] Furthermore, the two-stage generative adversarial network comprises two parts: a generator and a discriminator.
[0022] The generator uses an improved U-Net structure, taking scene feature vectors as input and outputting preliminary layout parameters in the first stage:
[0023] The transformation is performed layer by layer through a multi-layer fully connected network, with each layer processed using the non-linear activation function ReLU.
[0024] In addition to being passed to the next layer, the output of each layer is also used as a feature jumper input to the corresponding decoder layer.
[0025] The decoder part also consists of a multi-layer fully connected network, which receives the concatenated vector of the encoder's output from the same layer and the decoding result from the upper layer, and finally outputs the preliminary layout parameters.
[0026] The initial layout parameters are a set of component parameters. Each component includes position coordinates, size and parent index. Each parameter is normalized to the range of zero to one.
[0027] If the actual number of components is less than the agreed maximum number of components, the shortfall will be filled with zero vectors.
[0028] The second phase combines the preliminary results to generate resource priority and rendering strategy parameters:
[0029] The initial layout parameters output from the first stage are flattened into a one-dimensional vector and concatenated with the scene feature vector as input to the second-stage generator.
[0030] The input vector is processed through a multi-layer fully connected network, with a non-linear activation function set in each layer, and finally outputs the resource priority parameters and rendering strategy parameters corresponding to each component;
[0031] Resource priority parameters are limited to a range of zero to one using a probabilistic approach.
[0032] The rendering strategy parameters are obtained by taking the maximum value of the normalized probability distribution to obtain discrete strategy labels;
[0033] The discriminator uses Euclidean distance as the discrimination function, compares the generated parameters with the historical true parameters in blocks, and outputs the validity discrimination probability.
[0034] During training, the Euclidean distance between the generated parameters and the historical true parameters is used as the loss function, and the generator network weights are iteratively updated using gradient optimization methods until the Euclidean distance between the generated parameters is less than a preset distance threshold.
[0035] Furthermore, the construction and scheduling of the component loading queue includes the following steps:
[0036] Parse the component layout parameters, resource priority, and rendering strategy in the application parameters, and obtain the unique identifier, resource usage, historical usage frequency, and current scene relevance parameters of all components to be loaded in sequence;
[0037] Based on the dependencies of each component, a directed dependency graph of all components is generated. The dependency graph is then sorted using a topological sorting algorithm to obtain the component loading order that conforms to the dependency constraints.
[0038] For each component, the loading priority is calculated using a weighted summation method, specifically:
[0039] Set three sets of weight coefficients: resource size weight, usage frequency weight, and scenario relevance weight. The sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative.
[0040] The component's loading priority score is obtained by multiplying the resource usage size by the resource size weight, the historical usage frequency by the usage frequency weight, and the scene relevance by the scene relevance weight.
[0041] Components are sorted according to their loading priority score, with components that have higher priority scores being added to the loading queue first.
[0042] Based on the dependency order obtained from topological sorting, the priority queue is adjusted to generate a component loading queue that meets the dependency and priority requirements.
[0043] Furthermore, the component loading queue supports dynamic refresh and exception handling, including the following steps:
[0044] During operation, the loading status and dependency status of components in the component loading queue are monitored in real time. When it is detected that a component's dependent component fails to load or times out, the component is automatically removed from the current queue or its loading priority is temporarily reduced.
[0045] When external business requirements or scenario configurations change, the members and order of the component loading queue are dynamically updated based on the latest application parameters, dependencies, and priority scores.
[0046] For component instances that have been loaded and have not been activated or used for a set period of time, they are actively removed from the cache pool according to preset rules, and the queue is readjusted to release resources;
[0047] If a circular dependency, duplicate dependency, or component instance exception is found in the queue during component loading, an exception log will be automatically output, and the queue state will be restored to the most recent valid state through a rollback mechanism.
[0048] Furthermore, the adaptive Gaussian algorithm includes the following steps:
[0049] For each component, obtain the complexity coefficient in the current scenario. The complexity coefficient is calculated by weighting the number of components in the scenario, the nesting level of the components, and the data binding density parameters, and normalized to a standardized value between zero and one. The nesting level of the components is obtained by traversing the component tree structure described in the configuration file, recursively counting the path length from the root node to each component's position, and taking the maximum path length as the nesting level.
[0050] Data binding density is calculated by iterating through all components, counting the total number of fields in all bound data sources, dividing by the total number of components, and obtaining the average number of data binding fields. The density value is then normalized to the preset maximum density and used as a standardization parameter.
[0051] Obtain the current preset rendering error threshold. The error threshold is set in stages according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value.
[0052] For each component, a Gaussian function is used to dynamically calculate the radius of the rendering region of that component based on the complexity coefficient and the rendering error threshold, specifically:
[0053] The complexity coefficient is multiplied by the standard deviation parameter of the Gaussian distribution factor, and combined with the rendering error threshold, the rendering radius is calculated by the Gaussian function. The rendering radius is used to limit the actual rendering influence range of the component.
[0054] During the rendering task scheduling, the actual rendering area of each component is divided into spaces using an axis-aligned bounding box algorithm, and the bounding boxes of all components to be rendered are overlapped.
[0055] For areas deemed invalid overlap or completely occluded by other components, related rendering calculation tasks are removed in advance to reduce invalid rendering operations.
[0056] Furthermore, the optimized Diff algorithm includes the following steps:
[0057] Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two sets of nodes in their respective sequences;
[0058] The virtual DOM node sequence is divided into multiple business partitions based on the scene feature vector, and each partition corresponds to a different grouping label.
[0059] For the new and old virtual DOM node sequences, map them according to the unique identifier of the nodes, and convert the node indices in the new sequence into the index arrangement corresponding to the old sequence;
[0060] For each partition's index arrangement, a binary search algorithm is used to calculate the longest increasing subsequence, resulting in a set of node subsequence indices that do not require movement.
[0061] For nodes not included in the longest increasing subsequence, perform node movement or insertion / deletion operations to minimize the DOM.
[0062] Furthermore, the construction and management of the component cache pool includes the following steps:
[0063] Set the upper limit of the component cache pool capacity, where the upper limit is a preset limit on the number of component instances;
[0064] During operation, the usage frequency of each component instance in the cache pool is monitored in real time;
[0065] When the number of component instances in the cache pool reaches the capacity limit and new component instances need to be added, they are sorted according to the usage frequency of each component instance.
[0066] Remove the least frequently used component instances from the cache pool and release the corresponding resources;
[0067] New component instances are added to the cache pool.
[0068] The beneficial effects of this invention are:
[0069] This invention achieves automatic configuration, dynamic loading, and efficient rendering of UI components across multiple scenarios by introducing feature extraction and encoding algorithms, a two-stage generative adversarial network, and an adaptive scheduling optimization mechanism. Compared to existing manual configuration or static rule-driven solutions, this invention can automatically generate component layouts, priorities, and rendering strategies based on business needs and historical data, significantly improving the efficiency of UI development and maintenance.
[0070] This invention also effectively reduces resource consumption and improves interface response speed and operational stability in complex multi-scenario environments through priority queues, dependency topology sorting, adaptive Gaussian rendering optimization, longest increasing subsequence node movement optimization, and component cache management based on elimination strategies. It has strong advantages in intelligence, adaptability, and high performance. Attached Figure Description
[0071] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings:
[0072] Figure 1 This is a flowchart of a VUE dynamic component interface configuration and rendering method for multi-scenario reuse proposed in this invention;
[0073] Figure 2 This is a schematic diagram of an optimized Diff algorithm for a VUE dynamic component interface configuration and rendering method for multi-scenario reuse proposed in this invention.
[0074] Figure 3This is a schematic diagram illustrating the result of a VUE dynamic component interface configuration and rendering method for multi-scenario reuse proposed in this invention. Detailed Implementation
[0075] The present invention will now be described in further detail with reference to the accompanying drawings. These drawings are simplified schematic diagrams, illustrating only the basic structure of the invention, and therefore only show the components relevant to the invention.
[0076] refer to Figure 1-3 A method for configuring and rendering Vue dynamic components for multiple scenarios includes the following steps:
[0077] It receives multi-scene configuration files, parses them using feature extraction and encoding algorithms, and generates scene feature vectors.
[0078] A two-stage generative adversarial network is constructed. The scene feature vector is input, and the generator outputs component layout parameters, resource priority and rendering strategy to form the generation parameters. The discriminator evaluates the effectiveness of the generation parameters and iteratively optimizes them until the generation parameters reach the preset standard to obtain the application parameters.
[0079] Based on application parameters, the asynchronous component loading method of the Vue framework is adopted to realize on-demand component loading. A component loading queue is created by dynamically importing APIs, and topological sorting is performed on dependent components. The loading queue adopts a priority queue, and the priority calculation is based on a weighted function of resource size, usage frequency and scene relevance, and the sum of each weight coefficient is constant.
[0080] An adaptive Gaussian algorithm is introduced to calculate the radius of the component's rendering area. The rendering area is dynamically divided based on the scene complexity coefficient and the rendering error threshold. At the same time, a bounding box optimization mechanism is used to remove invalid rendering calculations in the early stage.
[0081] Based on the original Diff algorithm, the virtual DOM sequence is segmented according to group tags, and LIS optimization is performed separately within each segment. By calculating the longest increasing subsequence of the new and old virtual DOM tree node sequences, the number of DOM operations is reduced, achieving optimal performance within the partition and near-optimal performance globally.
[0082] Build a component cache pool based on an eviction policy, set a limit on the number of components to be cached, and evict the least used components first when the cache overflows.
[0083] In this embodiment, the multi-scenario configuration file supports JSON format, including:
[0084] Scene identification information: a unique identifier, name, and grouping tag for each business scene;
[0085] Component types: A list of components involved in each scenario, including basic components and composite components;
[0086] Attribute parameters: Configuration properties for each component, including initial values, state, style parameters, interaction events, and data source references;
[0087] Structural hierarchy: Nesting, parent-child, parallel, partitioning, column division, and grid layout relationships between components;
[0088] Dependency relationships: The relationships between components in terms of dependencies and data flow, including event linkage, data binding, and loading order constraints;
[0089] Historical configuration data: past configuration and usage records of scenarios or components, including user preferences, historical layout schemes, and interaction logs;
[0090] The scene identifier field is encoded as follows: the scene identifier field is hashed into binary code; the component type is numbered according to a predefined dictionary and the frequency is counted; the attribute parameters are processed by numerical normalization and one-hot encoding and then concatenated according to the mean; the structural hierarchy is obtained by tree traversal to obtain the depth and width numerical features; the dependency relationship is encoded in the form of an adjacency matrix and expanded into a one-dimensional vector; the historical configuration parameters are normalized and directly concatenated; all features are concatenated into a fixed-length vector in a fixed order and normalized as a whole to finally form the scene feature vector.
[0091] In this embodiment, the two-stage generative adversarial network comprises two parts: a generator and a discriminator.
[0092] The generator uses an improved U-Net structure, taking scene feature vectors as input and outputting preliminary layout parameters in the first stage:
[0093] The transformation is performed layer by layer through a multi-layer fully connected network, with each layer processed using the non-linear activation function ReLU.
[0094] In addition to being passed to the next layer, the output of each layer is also used as a feature jumper input to the corresponding decoder layer.
[0095] The decoder part also consists of a multi-layer fully connected network, which receives the concatenated vector of the encoder's output from the same layer and the decoding result from the upper layer, and finally outputs the preliminary layout parameters.
[0096] The initial layout parameters are a set of component parameters. Each component includes position coordinates, size and parent index. Each parameter is normalized to the range of zero to one.
[0097] If the actual number of components is less than the agreed maximum number of components, the shortfall will be filled with zero vectors.
[0098] The second phase combines the preliminary results to generate resource priority and rendering strategy parameters:
[0099] The initial layout parameters output from the first stage are flattened into a one-dimensional vector and concatenated with the scene feature vector as input to the second-stage generator.
[0100] The input vector is processed through a multi-layer fully connected network, with a non-linear activation function set in each layer, and finally outputs the resource priority parameters and rendering strategy parameters corresponding to each component;
[0101] Resource priority parameters are limited to a range of zero to one using a probabilistic approach.
[0102] The rendering strategy parameters are obtained by taking the maximum value of the normalized probability distribution to obtain discrete strategy labels;
[0103] The discriminator uses Euclidean distance as the discrimination function, compares the generated parameters with the historical true parameters in blocks, and outputs the validity discrimination probability, including:
[0104] Select the data corresponding to the generated parameters and the historical real parameters;
[0105] For all corresponding numerical parameters in the generated parameters and the historical true parameters, calculate the difference between each pair of parameters in turn;
[0106] Square all the differences separately, and then sum all the squared results.
[0107] The square root of the accumulated result is used to obtain the Euclidean distance between the generated parameters and the historical true parameters.
[0108] A preset distance threshold is set, and the calculated Euclidean distance is compared with this threshold.
[0109] When the Euclidean distance is less than or equal to the threshold, the generated parameter is determined to be valid; when the Euclidean distance is greater than the threshold, the generated parameter is determined to be invalid.
[0110] During training, the Euclidean distance between the generated parameters and the historical true parameters is used as the loss function, and the generator network weights are iteratively updated using gradient optimization methods until the Euclidean distance between the generated parameters is less than a preset distance threshold.
[0111] In this embodiment, the construction and scheduling of the component loading queue includes the following steps:
[0112] The application parameters, including component layout parameters, resource priority, and rendering strategy, are analyzed to sequentially obtain the unique identifier, resource usage size, historical usage frequency, and current scene relevance parameters for all components to be loaded. The resource usage size is determined by reading the component's main code package size using an automated packaging tool, adding the bytes of all dependent static resource files and the initial peak memory usage, weighting each of these three items, and summing them to obtain the original usage value. This value is then linearly normalized using the maximum and minimum values for all components. Historical usage frequency is obtained by analyzing the cumulative number of loads within a recent fixed time window and linearly normalized using the maximum and minimum usage counts for all components. Current scene relevance is calculated by comparing the intersection of the component's applicable scene tag and the current business scene tag, or by calculating the cosine similarity using the one-hot encoded vector of the tag set, and normalizing it to a decimal between zero and one.
[0113] Based on the dependencies of each component, a directed dependency graph is generated for all components: The dependency description data of all components to be loaded is parsed, and each component is uniquely identified as a node in the graph. For each component, its list of dependent components is read sequentially, and a directed edge is established between each dependent component in the list and the current component, pointing to the current component, indicating that this component can only be loaded after its dependent components have been loaded. After traversing all components and their dependency lists, a complete directed dependency graph is generated. The directed dependency graph can be stored using an adjacency list or an adjacency matrix. After generating the directed dependency graph, a cycle check is performed on the graph structure. If a circular dependency exists, an exception message is output; otherwise, the topology sorting process is initiated.
[0114] A topological sorting algorithm is used to sort the dependency graph to obtain the component loading order that meets the dependency constraints;
[0115] For each component, the loading priority is calculated using a weighted summation method, specifically:
[0116] Set three sets of weight coefficients: resource size weight, usage frequency weight, and scenario relevance weight. The sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative.
[0117] The component's loading priority score is obtained by multiplying the resource usage size by the resource size weight, the historical usage frequency by the usage frequency weight, and the scene relevance by the scene relevance weight.
[0118] Components are sorted according to their loading priority score, with components that have higher priority scores being added to the loading queue first.
[0119] Based on the dependency order obtained from topological sorting, the priority queue is adjusted to generate a component loading queue that meets the dependency and priority requirements.
[0120] In this embodiment, the component loading queue supports dynamic refresh and exception handling, including the following steps:
[0121] During operation, the loading status and dependency status of components in the component loading queue are monitored in real time. When it is detected that a component's dependent component fails to load or times out, the component is removed from the current queue or its loading priority is temporarily reduced.
[0122] When external business requirements or scenario configurations change, the members and order of the component loading queue are dynamically updated based on the latest application parameters, dependencies, and priority scores.
[0123] For component instances that have been loaded and have not been activated or used for a set period of time, they are actively removed from the cache pool according to preset rules, and the queue is readjusted to release resources;
[0124] If a circular dependency, duplicate dependency, or component instance exception is found in the queue during component loading, an exception log is output, and the queue state is restored to the most recent valid state through a rollback mechanism.
[0125] In this embodiment, the adaptive Gaussian algorithm includes the following steps:
[0126] For each component to be rendered, the complexity coefficient of the current scene is first obtained. The complexity coefficient is calculated by weighting the number of components in the scene, the nesting level of the components, and the data binding density parameter, and then normalized to a standardized value between zero and one. The nesting level of the components is obtained by traversing the component tree structure described in the configuration file, recursively counting the path length from the root node to each component, and taking the maximum path length as the nesting level. The data binding density is obtained by traversing all components, counting the total number of fields of all bound data sources, and then dividing by the total number of components to obtain the average number of data binding fields. This density value is then normalized with the preset maximum density and used as the standardization parameter.
[0127] Obtain the current preset rendering error threshold. The error threshold is set in stages according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value.
[0128] For each component, a Gaussian function is used to dynamically calculate the radius of the rendering region of that component based on the complexity coefficient and the rendering error threshold, specifically:
[0129] The complexity coefficient is multiplied by the standard deviation parameter of the Gaussian distribution factor, and combined with the rendering error threshold, the rendering radius is calculated by the Gaussian function. The rendering radius is used to limit the actual rendering influence range of the component.
[0130] During rendering task scheduling, the actual rendering area of each component is spatially partitioned using an axis-aligned bounding box algorithm. Overlap detection is performed on the bounding boxes of all components to be rendered. Based on the actual rendering area parameters of each component, the left, right, top, and bottom boundary coordinates of its axis-aligned bounding box are calculated. Subsequently, all component bounding boxes are compared pairwise to determine if their horizontal and vertical intervals intersect. If both intersect, it is determined that the bounding boxes overlap. For all overlapping bounding boxes, the component number and overlapping area coordinates are recorded, and the component hierarchy information is used to determine if any component is completely occluded. Finally, the overlap detection results and occlusion information are output, providing data for the subsequent removal of invalid rendering areas.
[0131] For areas that are determined to be invalid overlaps or completely occluded by other components, related rendering calculation tasks are removed in advance to reduce invalid rendering operations and improve overall rendering efficiency.
[0132] In this embodiment, the optimized Diff algorithm includes the following steps:
[0133] Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two sets of nodes in their respective sequences;
[0134] The virtual DOM node sequence is divided into multiple business partitions based on the scene feature vector, and each partition corresponds to a different grouping label.
[0135] For the new and old virtual DOM node sequences, map them according to the unique identifier of the nodes, and convert the node indices in the new sequence into the index arrangement corresponding to the old sequence;
[0136] For each partition's index arrangement, a binary search algorithm is used to calculate the longest increasing subsequence, resulting in a set of node subsequence indices that do not require movement.
[0137] For nodes not included in the longest increasing subsequence, perform node movement or insertion / deletion operations to minimize the DOM.
[0138] In this embodiment, the construction and management of the component cache pool includes the following steps:
[0139] Set the upper limit of the component cache pool capacity, where the upper limit is a preset limit on the number of component instances;
[0140] During operation, the usage frequency of each component instance in the cache pool is monitored in real time;
[0141] When the number of component instances in the cache pool reaches the capacity limit and new component instances need to be added, they are sorted according to the usage frequency of each component instance.
[0142] Remove the least frequently used component instances from the cache pool and release the corresponding resources;
[0143] New component instances are added to the cache pool to ensure that the number of component instances in the cache pool does not exceed the capacity limit.
[0144] Example 1:
[0145] To verify the feasibility of this invention in practice, it was applied to the "operation dashboard" business scenario of a SaaS enterprise data analysis platform.
[0146] Users configure the "Operations Dashboard" scenario in JSON format in the platform backend. A typical configuration snippet is as follows:
[0147] Scene ID: SCN_ANALYSIS_2024;
[0148] Component list: TableChart, LineChart, PieChart, ExportBtn, FilterPanel;
[0149] Attribute parameters: such as the initial state of each component (visible / hidden), default data source, theme color;
[0150] Structure hierarchy: TableChart, LineChart, and PieChart are direct child nodes of the root container, while ExportBtn and FilterPanel are its child nodes;
[0151] Dependencies: ExportBtn depends on TableChart rendering to complete, and FilterPanel depends on data source initialization;
[0152] Historical configuration data: TableChart has an average of 300 daily visits over the past 30 days, and ExportBtn has 100 daily clicks.
[0153] Based on the above configuration, parameters are extracted and encoded. Example of a scene feature vector:
[0154] Number of components: 5;
[0155] Maximum nesting level: 2;
[0156] Data binding density: 12 fields / 5 components = 2.4;
[0157] TableChart access frequency: 300 / total accesses = 0.43 (normalized);
[0158] ExportBtn click-through rate: 100 / total visits = 0.14 (normalized);
[0159] The scene feature vector is input into the two-stage generative adversarial network, and the system automatically outputs the following application parameters, as shown in Table 1.
[0160] Table 1 Sample Core Data Table
[0161]
[0162] As shown in Table 1, the core display components TableChart and LineChart have high priority and use synchronous or asynchronous rendering to ensure that the main content of the large screen is available quickly; ExportBtn is a functional component and uses deferred rendering to prevent it from affecting the performance of the main view area.
[0163] The spatial coordinates and dimensions of all components are adaptively adjusted by AI based on the standard visualization template for large screens. ExportBtn can only be loaded after TableChart is rendered to ensure the availability and correctness of the data export button.
[0164] TableCharts and LineCharts with high access frequency are preferentially retained in the cache pool to avoid repeated destruction and reconstruction, thereby improving response speed; lower priority functional components will be preferentially eliminated if the cache pool overflows.
[0165] TableChart and LineChart have many data binding fields and high historical interaction frequency. The model automatically assigns them a larger rendering area radius and a higher priority loading weight to achieve adaptive high-performance rendering of key parts of the interface.
[0166] Based on the complexity of the scene and the AI output, the components automatically match the best rendering strategy (synchronous, asynchronous, delayed), so that the entire business dashboard can ensure the stability and efficiency of the main content, while also taking into account the flexibility of functions and the utilization of system resources.
[0167] The above description is only a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any equivalent substitutions or modifications made by those skilled in the art within the scope of the technology disclosed in the present invention, based on the technical solution and inventive concept of the present invention, should be covered within the scope of protection of the present invention.
Claims
1. A method for configuring and rendering Vue dynamic component interfaces for multi-scenario reuse, characterized in that, Includes the following steps: It receives multi-scene configuration files, parses them using feature extraction and encoding algorithms, and generates scene feature vectors. A two-stage generative adversarial network is constructed. The scene feature vector is input, and the generator outputs component layout parameters, resource priority and rendering strategy to form the generation parameters. The discriminator evaluates the effectiveness of the generation parameters and iteratively optimizes them until the generation parameters reach the preset standard to obtain the application parameters. The two-stage generative adversarial network consists of two parts: a generator and a discriminator. The generator adopts an improved U-Net structure, which takes the scene feature vector as input and outputs the preliminary layout parameters in the first stage. The decoder part is also composed of a multi-layer fully connected network, which receives the concatenated vector of the encoder's output and the decoding result of the upper layer, and finally outputs the preliminary layout parameters. Based on application parameters, the asynchronous component loading method of the Vue framework is adopted. A component loading queue is created by dynamically importing APIs, and the dependent components are sorted topologically. The loading queue adopts a priority queue to obtain the components to be rendered. For the component to be rendered, based on the component layout parameters in the application parameters, an adaptive Gaussian algorithm is introduced to calculate the radius of the component rendering area. The rendering area is dynamically divided according to the scene complexity coefficient and the rendering error threshold. At the same time, a bounding box optimization mechanism is used to remove invalid rendering calculations and determine the effective rendering range. The adaptive Gaussian algorithm includes: for each component, obtaining the complexity coefficient in the current scene; for each component, applying a Gaussian function; and dynamically calculating the rendering area radius of the component based on the complexity coefficient and the rendering error threshold. When rendering or updating the interface within the effective rendering range, an optimized Diff algorithm is used to obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence. Based on the scene feature vector, the virtual DOM node sequence is divided into multiple business partitions. The new and old virtual DOM node sequences are mapped according to the unique identifier of the node. The node index in the new sequence is converted into the index arrangement corresponding to the old sequence. For the index arrangement of each partition, the longest increasing subsequence is calculated using the binary search method to obtain the set of node subsequence indices that do not need to be moved. For nodes not included in the longest increasing subsequence, node moving or insertion / deletion operations are performed to minimize the DOM. A component cache pool based on the eviction policy is constructed to include the rendered components in the management. The upper limit of the component cache is set to a limited number. When the cache overflows, the least used components are evicted first to obtain the final components.
2. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 1, characterized in that, The multi-scenario configuration file supports JSON format, including: Scene identification information: a unique identifier, name, and grouping tag for each business scene; Component types: A list of components involved in each scenario, including basic components and composite components; Attribute parameters: Configuration properties for each component, including initial values, state, style parameters, interaction events, and data source references; Structural hierarchy: Nesting, parent-child, parallel, partitioning, column division, and grid layout relationships between components; Dependency relationships: The relationships between components in terms of dependencies and data flow, including event linkage, data binding, and loading order constraints; Historical configuration data: past configuration and usage records of scenarios or components, including user preferences, historical layout schemes, and interaction logs; The scene identifier field is encoded as follows: the scene identifier field is hashed into binary code; the component type is numbered according to a predefined dictionary and the frequency is counted; the attribute parameters are processed by numerical normalization and one-hot encoding and then concatenated according to the mean; the structural hierarchy is obtained by tree traversal to obtain the depth and width numerical features; the dependency relationship is encoded in the form of an adjacency matrix and expanded into a one-dimensional vector; the historical configuration parameters are normalized and directly concatenated; all features are concatenated into a fixed-length vector in a fixed order and normalized as a whole to finally form the scene feature vector.
3. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 2, characterized in that, The two-stage generative adversarial network consists of two parts: a generator and a discriminator. The generator uses an improved U-Net structure, taking scene feature vectors as input and outputting preliminary layout parameters in the first stage: The transformation is performed layer by layer through a multi-layer fully connected network, with each layer processed using the non-linear activation function ReLU. In addition to being passed to the next layer, the output of each layer is also used as a feature jumper input to the corresponding decoder layer. The decoder part also consists of a multi-layer fully connected network, which receives the concatenated vector of the encoder's output from the same layer and the decoding result from the upper layer, and finally outputs the preliminary layout parameters. The initial layout parameters are a set of component parameters. Each component includes position coordinates, size and parent index. Each parameter is normalized to the range of zero to one. If the actual number of components is less than the agreed maximum number of components, the shortfall will be filled with zero vectors. The second phase combines the preliminary results to generate resource priority and rendering strategy parameters: The initial layout parameters output from the first stage are flattened into a one-dimensional vector and concatenated with the scene feature vector as input to the second-stage generator. The input vector is processed through a multi-layer fully connected network, with a non-linear activation function set in each layer, and finally outputs the resource priority parameters and rendering strategy parameters corresponding to each component; Resource priority parameters are limited to a range of zero to one using a probabilistic approach. The rendering strategy parameters are obtained by taking the maximum value of the normalized probability distribution to obtain discrete strategy labels; The discriminator uses Euclidean distance as the discrimination function, compares the generated parameters with the historical true parameters in blocks, and outputs the validity discrimination probability. During training, the Euclidean distance between the generated parameters and the historical true parameters is used as the loss function, and the generator network weights are iteratively updated using gradient optimization methods until the Euclidean distance between the generated parameters is less than a preset distance threshold.
4. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 3, characterized in that, The construction and scheduling of the component loading queue includes the following steps: Parse the component layout parameters, resource priority, and rendering strategy in the application parameters, and obtain the unique identifier, resource usage, historical usage frequency, and current scene relevance parameters of all components to be loaded in sequence; Based on the dependencies of each component, a directed dependency graph of all components is generated. The dependency graph is then sorted using a topological sorting algorithm to obtain the component loading order that conforms to the dependency constraints. For each component, the loading priority is calculated using a weighted summation method, specifically: Set three sets of weight coefficients: resource size weight, usage frequency weight, and scenario relevance weight. The sum of the three sets of weight coefficients is one, and all weight coefficients are non-negative. The component's loading priority score is obtained by multiplying the resource usage size by the resource size weight, the historical usage frequency by the usage frequency weight, and the scene relevance by the scene relevance weight. Components are sorted according to their loading priority score, with components that have higher priority scores being added to the loading queue first. Based on the dependency order obtained from topological sorting, the priority queue is adjusted to generate a component loading queue that meets the dependency and priority requirements.
5. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 4, characterized in that, The component loading queue supports dynamic refresh and exception handling, including the following steps: During operation, the loading status and dependency status of components in the component loading queue are monitored in real time. When it is detected that a component's dependent component fails to load or times out, the component is removed from the current queue or its loading priority is temporarily reduced. When external business requirements or scenario configurations change, the members and order of the component loading queue are dynamically updated based on the latest application parameters, dependencies, and priority scores. For components that have been loaded and have not been activated or used for a set period of time, they are actively removed from the cache pool according to preset rules, and the queue is readjusted to release resources; If a circular dependency, duplicate dependency, or component exception is found in the queue during component loading, an exception log is output, and the queue is restored to the most recent valid state through a rollback mechanism.
6. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 5, characterized in that, The adaptive Gaussian algorithm includes the following steps: For each component, obtain the complexity coefficient in the current scenario. The complexity coefficient is calculated by weighting the number of components in the scenario, the nesting level of the components, and the data binding density parameters, and normalized to a standardized value between zero and one. The nesting level of the components is obtained by traversing the component tree structure described in the configuration file, recursively counting the path length from the root node to each component's position, and taking the maximum path length as the nesting level. Data binding density is calculated by iterating through all components, counting the total number of fields in all bound data sources, dividing by the total number of components, and obtaining the average number of data binding fields. The density value is then normalized to the preset maximum density and used as a standardization parameter. Obtain the current preset rendering error threshold. The error threshold is set in stages according to the scene complexity coefficient. The higher the complexity coefficient, the larger the error threshold value. For each component, a Gaussian function is used to dynamically calculate the radius of the rendering region of that component based on the complexity coefficient and the rendering error threshold, specifically: The complexity coefficient is multiplied by the standard deviation parameter of the Gaussian distribution factor, and combined with the rendering error threshold, the rendering radius is calculated by the Gaussian function. The rendering radius is used to limit the actual rendering influence range of the component. During the rendering task scheduling, the actual rendering area of each component to be rendered is divided into spaces using an axis-aligned bounding box algorithm, and the bounding boxes of all components to be rendered are overlapped. For areas deemed invalid overlap or completely occluded by other components, related rendering calculation tasks are removed in advance to reduce invalid rendering operations.
7. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 6, characterized in that, The optimized Diff algorithm includes the following steps: Obtain the current virtual DOM tree node sequence and the target virtual DOM tree node sequence, and record the index order of the two sets of nodes in their respective sequences; The virtual DOM node sequence is divided into multiple business partitions based on the scene feature vector, and each partition corresponds to a different grouping label. For the new and old virtual DOM node sequences, map them according to the unique identifier of the nodes, and convert the node indices in the new sequence into the index arrangement corresponding to the old sequence; For each partition's index arrangement, a binary search algorithm is used to calculate the longest increasing subsequence, resulting in a set of node subsequence indices that do not require movement. For nodes not included in the longest increasing subsequence, perform node movement or insertion / deletion operations to minimize the DOM.
8. The Vue dynamic component interface configuration and rendering method for multi-scenario reuse according to claim 7, characterized in that, The construction and management of the component cache pool includes the following steps: Set the upper limit of the component cache pool capacity, where the upper limit is a preset limit of the number of components; During operation, the usage frequency of each component in the cache pool is monitored in real time; When the number of components in the cache pool reaches the capacity limit and new components need to be added, they are sorted according to their usage frequency. Remove the least frequently used components from the cache pool and release the corresponding resources; New components are added to the cache pool.