A seamless integration method of components in version evolution of Vue framework

Abstract

The application provides a seamless integration method for components in Vue framework version evolution, belongs to the technical field of micro-frontend architecture and front-end component integration, and realizes decoupling and seamless integration of different versions of Vue components by loading old version Vue components into new version Vue applications through a micro-frontend container. The application can seamlessly use Vue 2 components in a Vue 3 project, reduces component library migration cost, avoids version conflicts, realizes quick integration of cross-version components and controllable management of the life cycle. The method has good compatibility, expansibility and high efficiency, and is suitable for version evolution and component reuse scenarios of large-scale front-end systems.

Description

Technical Field

[0001] This invention relates to the fields of micro-frontend architecture and frontend component integration technology, and in particular to a method for seamless component integration in the evolution of the Vue framework. Background Technology

[0002] With the rapid development of front-end technologies, Vue.js, as a popular front-end framework, is increasingly being upgraded from Vue 2.x to Vue 3.x. However, a large number of component libraries and functional modules developed based on Vue 2.x still exist. When migrating to Vue 3 applications, these old components cannot be directly reused, forcing development teams to perform a lot of repetitive development or refactoring. Due to the differences in the underlying framework implementation between Vue 2 and Vue 3, existing components often cannot function properly in the Vue 3 environment, resulting in high time and manpower costs for system upgrades. Against this backdrop, how to decouple and integrate components from different versions of Vue to reduce system migration costs has become an urgent technical problem to be solved. Summary of the Invention

[0003] This invention provides a seamless component integration method for Vue framework version evolution, addressing the issue of not being able to directly use Vue 2 components in traditional Vue 3 projects. By introducing the micro-frontend architecture concept, different versions of Vue components are isolated, sandboxed, and dynamically mounted, thereby achieving seamless reuse of Vue 2 components in Vue 3 applications. This method aims to reduce the development cost of cross-version component migration, eliminating the need to refactor existing component code, while maintaining high system performance and maintainability.

[0004] The technical solution of this invention is: A method for seamless integration of components in the evolution of the Vue framework is proposed. By loading old version Vue components into the new version Vue application through a micro frontend container, the decoupling and seamless integration of different version Vue components can be achieved.

[0005] Furthermore, Use global variables to manage the loading state and instances of child component containers in a unified manner; Based on the qiankun framework, different versions of Vue sub-applications are loaded, and component instances are precisely controlled by the unique identifier componentUuid; Through dynamic properties and event injection mechanisms, it supports flexible configuration of components in business scenarios; Introduce the beforeCreateInit callback function before the component is created to implement customized initialization logic.

[0006] Furthermore, The global variable `window` is used as a state management space to register and manage the loading state and instance of each child component container; Each different version of the component container maintains independent state information on the window to avoid mutual interference.

[0007] The qiankun framework is used to implement sandbox loading and lifecycle control of sub-applications, including managing the mounting, startup, and unmounting processes of sub-applications.

[0008] Furthermore, The Qiankun micro-frontend framework is used as the technical foundation to sandbox different versions of Vue sub-applications; the Qiankun framework dynamically loads sub-applications at specified entry points and isolates their runtime environment; When a sub-application is loaded for the first time, the main application dynamically mounts the sub-application container by calling the registration mechanism provided by qiankun.

[0009] Furthermore, Each Vue component library is registered as an independent sub-application. During registration, each sub-application is assigned a unique libName and mapped to the corresponding entry address. In this way, the main application can dynamically call the corresponding component library entry through the libName, realizing on-demand loading of sub-applications.

[0010] Furthermore, The beforeCreateInit callback mechanism is designed to perform additional initialization operations by calling the callback function before the sub-application is loaded and the component is mounted. Through beforeCreateInit, developers can dynamically adjust the runtime environment or preset necessary parameters before the component is actually created, thereby achieving flexible control over the component initialization process.

[0011] Furthermore, When a component is mounted, props and event callbacks are dynamically injected to adapt to different business scenarios. When the main application calls a child component, it passes initialization data and callback functions to the child component through a unified interface.

[0012] Each component instance is assigned a unique identifier, componentUuid, upon creation. This identifier is used to accurately locate and manage the component instance. The componentUuid is then used to quickly find, communicate with, and update the corresponding component instance in subsequent business logic.

[0013] Furthermore, Controlling the component lifecycle includes loading, unloading, and obtaining component instances; the main application uses these methods to fine-tune the component lifecycle; when a component is no longer needed, the unload method is called to safely unload the component and clean up resources; when needed, the load method is used to reload the component. The beneficial effects of this invention are It enables seamless use of Vue 2 components in Vue 3 projects without requiring the reconstruction or rewriting of existing components, saving a significant amount of development time and costs.

[0014] By adopting an on-demand loading approach, each component library is registered as an independent sub-application, so that the system only loads the corresponding component when needed, reducing resource waste and improving performance.

[0015] Through global state management and micro-frontend isolation mechanisms, multiple different versions of component libraries can coexist, avoiding traditional dependency conflict issues and significantly improving system stability and compatibility.

[0016] It provides a unique identifier for component instances, componentUuid, and a comprehensive lifecycle control interface, which facilitates fine-grained management and flexible expansion of components by applications, thereby enhancing the maintainability and scalability of the system.

[0017] The `beforeCreateInit` callback enables customized operations before component initialization, meeting personalized needs in complex business scenarios and further enhancing the applicability and flexibility of the solution. Attached Figure Description

[0018] Figure 1 This is a schematic diagram of the workflow of the present invention. Detailed Implementation

[0019] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of the present invention, but not all embodiments. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0020] This invention discloses a method for seamless component integration during the evolution of the Vue framework, employing the following technical solution: (1) Global state isolation management: The global variable `window` is used to isolate and manage the state of component containers. Specifically, each different version of the component container maintains independent state information on `window` to avoid mutual interference. In this way, the main application can globally access and control the loading state and configuration of each sub-application container, realizing unified management of cross-version component state.

[0021] (2) Micro-frontend sandbox loading: This invention uses the qiankun micro-frontend framework as its technical foundation to sandbox the loading of different versions of Vue sub-applications. The qiankun framework can dynamically load sub-applications at specified entry points and isolate their runtime environments (including CSS styles, JS global variables, etc.), thereby ensuring that multiple different versions of Vue components do not conflict when coexisting on the same page. When a sub-application is loaded for the first time, the main application dynamically mounts the sub-application container by calling the registration mechanism provided by qiankun.

[0022] (3) Independent Sub-application Registration: Each Vue component library is registered as an independent sub-application. During registration, a unique libName is assigned to each sub-application, and the corresponding entry address (i.e., the publishing entry point of the component library) is mapped. In this way, the main application can dynamically call the corresponding component library entry point through libName, realizing on-demand loading of sub-applications. The independent sub-application registration scheme ensures clear boundaries between different component libraries and facilitates version management and incremental expansion.

[0023] (4) Customized Initialization Callback: To support customized extensions during component initialization, this invention designs the beforeCreateInit callback mechanism. Before the sub-application loads and the component is mounted, this callback function is called to perform additional initialization operations, such as setting global configurations, injecting dependencies, or modifying default component properties. Through beforeCreateInit, developers can dynamically adjust the runtime environment or pre-set necessary parameters before the component is actually created, achieving flexible control over the component initialization process.

[0024] (5) Dynamic Property and Event Injection: This invention supports dynamic injection of props and event callbacks when components are mounted to adapt to different business scenarios. When the main application calls a child component, it can pass initialization data and callback functions to the child component through a unified interface. Each component instance is assigned a unique identifier, componentUuid, when it is created, for precise location and management of the component instance. Through componentUuid, the corresponding component instance can be quickly found, communicated, and updated in subsequent business logic.

[0025] (6) Component Lifecycle Control: This invention provides a set of component management methods, including operation interfaces such as load, unload, and getInstance. The main application can use these methods to finely control the component lifecycle. For example, when a component is no longer needed, the unload method can be called to safely unload the component and clean up resources; when needed, the load method can be used to reload the component. Through a complete lifecycle management mechanism, the efficiency of component resource usage and the stability of the system are guaranteed. The above description is merely a preferred embodiment of the present invention and is only used to illustrate the technical solution of the present invention, and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A method for seamless component integration during the evolution of the Vue framework, characterized in that, By loading older versions of Vue components into newer versions of Vue applications using a micro-frontend container, decoupling and seamless integration of different versions of Vue components can be achieved.

2. The method according to claim 1, characterized in that, Use global variables to manage the loading state and instances of child component containers in a unified manner; Based on the qiankun framework, different versions of Vue sub-applications are loaded, and component instances are precisely controlled by the unique identifier componentUuid; Through dynamic properties and event injection mechanisms, it supports flexible configuration of components in business scenarios; Introduce the beforeCreateInit callback function before the component is created to implement customized initialization logic.

3. The method according to claim 2, characterized in that, The global variable `window` is used as a state management space to register and manage the loading state and instance of each child component container; Each different version of the component container maintains independent state information on the window to avoid mutual interference.

4. The method according to claim 2, characterized in that, The qiankun framework is used to implement sandbox loading and lifecycle control of sub-applications, including managing the mounting, startup, and unmounting processes of sub-applications.

5. The method according to claim 4, characterized in that, The Qiankun micro-frontend framework is used as the technical foundation to sandbox different versions of Vue sub-applications; the Qiankun framework dynamically loads sub-applications at specified entry points and isolates their runtime environment; When a sub-application is loaded for the first time, the main application dynamically mounts the sub-application container by calling the registration mechanism provided by qiankun.

6. The method according to claim 4, characterized in that, Each Vue component library is registered as an independent sub-application. During registration, each sub-application is assigned a unique libName and mapped to the corresponding entry address. In this way, the main application can dynamically call the corresponding component library entry through the libName, realizing on-demand loading of sub-applications.

7. The method according to claim 4, characterized in that, The beforeCreateInit callback mechanism is designed to perform additional initialization operations by calling the callback function before the sub-application is loaded and the component is mounted. Through beforeCreateInit, developers can dynamically adjust the runtime environment or preset necessary parameters before the component is actually created, thereby achieving flexible control over the component initialization process.

8. The method according to claim 4, characterized in that, When a component is mounted, props and event callbacks are dynamically injected to adapt to different business scenarios; when the main application calls a child component, it passes initialization data and callback functions to the child component through a unified interface.

9. The method according to claim 7, characterized in that, Each component instance is assigned a unique identifier, componentUuid, upon creation. This identifier is used to accurately locate and manage the component instance. The componentUuid is then used to quickly find, communicate with, and update the corresponding component instance in subsequent business logic.

10. The method according to claim 4, characterized in that, Controlling the component lifecycle includes loading, unloading, and obtaining component instances; the main application uses these methods to finely control the component lifecycle; when a component is no longer needed, the unload method is called to safely unload the component and clean up resources; and the load method is used to reload the component when needed.

Images