Search

CN-121979587-A - Method for executing React component in Vue based on adapter mode

CN121979587ACN 121979587 ACN121979587 ACN 121979587ACN-121979587-A

Abstract

The invention belongs to the technical field of front-end cross-frame component multiplexing, and particularly relates to a method for running a real component in a Vue based on an adapter mode, wherein the method comprises the steps of obtaining a Vue wrapper component, finishing component registration through the Vue wrapper component, packaging the real component into a Vue global or local callable component to obtain a Vue compatible real component, achieving Props bidirectional synchronization, event system mapping, life cycle hook alignment and cross-frame conversion from a slot to a child node based on a rendering and bridging module constructed by the Vue wrapper component, calling the Vue compatible real component in a Vue environment, finishing component initialization rendering, running interaction response and state updating through the rendering and bridging module, and triggering an unloading flow of the real component when a Vue parent component is destroyed. Therefore, the problems of poor flexibility, low performance, complex flow and the like in the prior art are solved.

Inventors

  • ZHANG XIXI

Assignees

  • 北京白龙马云行科技有限公司

Dates

Publication Date
20260505
Application Date
20260120

Claims (10)

  1. 1. A method for executing a real component in a Vue based on an adapter schema, comprising: Acquiring a Vue wrapper component, wherein the Vue wrapper component is used as a bridging carrier between a reaction component and a Vue environment; completing component registration through the Vue wrapper component, and packaging the real component into a Vue global or local callable component to obtain a Vue compatible real component; Based on a rendering and bridging module constructed by the Vue wrapper component, props bidirectional synchronization, event system mapping, lifecycle hook alignment and cross-frame conversion from a slot to a child node are achieved, the Vue compatible exact component is called in a Vue environment, and component initialization rendering, runtime interaction response and state updating are completed through the rendering and bridging module; When the Vue parent component is destroyed, the rendering and bridging module is called by the Vue wrapper component to trigger the unloading flow of the act component.
  2. 2. The method of adapter mode based act component execution in a Vue of claim 1, wherein obtaining a Vue wrapper component comprises: calling a preset Vue wrapper component template; based on the preset Vue wrapper component template, configuring basic parameters of the Vue wrapper component template according to the type of a to-be-integrated reaction component and version information of the Vue application; and instantiating the configured Vue wrapper component template into a callable Vue wrapper component to finish the acquisition of the Vue wrapper component.
  3. 3. The method of executing a real component in a Vue based on an adapter mode according to claim 1, wherein the completing component registration by the Vue wrapper component encapsulates the real component as a Vue global or local callable component, comprising: Constructing a high-order packaging function React2VueWrapper; taking the original reaction component as an entry to enter the high-order packaging function, defining a Vue component configuration item, and packaging the original reaction component into a registrable Vue component based on the Vue component configuration item; If the target Vue parent component is required to be registered as a Vue global component, calling a Vue.component method to complete global registration of the registrable Vue component, and if the target Vue parent component is required to be registered as a Vue local component, declaring the registrable Vue component in a components option of the target Vue parent component to complete local registration; After registration is completed, generating the Vue compatible reaction component based on rules of the Vue component configuration items, wherein the Vue compatible reaction component can be directly called through a Vue template grammar.
  4. 4. The method of adapter mode based act component execution in Vue of claim 1, wherein Props is bi-directionally synchronized, comprising: Setting an attribute collection unit in the rendering and bridging module, and collecting attributes transferred from a Vue parent component to a Vue compatible reaction component; converting the attribute of the Vue format into a real compatible format through an attribute conversion unit, and filtering invalid attributes at the same time; an attribute monitoring unit is arranged for monitoring the change of the converted attribute, and when the attribute is changed, an update instruction of the rendering and bridging module is triggered; Synchronously injecting the updated attribute into the compact component through the attribute injection unit, triggering re-rendering of the compact component, and completing Props one-way synchronization from Vue to compact; when the internal attribute of the reaction component is changed, the changed attribute is converted into a Vue compatible format through an attribute return unit and is synchronized to a Vue wrapper component, and Props reverse synchronization from the reaction to the Vue is completed.
  5. 5. The adapter mode based method of executing a reaction component in Vue of claim 1, wherein event system mapping, lifecycle hook alignment, and slot-to-child cross-frame conversion, comprises: The event system mapping is that an event set transferred by a Vue father component is traversed in a rendering and bridging module, events in a Vue format are converted into callback functions in a reactive compatible format, a bridging method is established for each callback function after conversion, when the callback function is triggered by the reactive component, a corresponding Vue custom event is triggered through the bridging method, and upward bubbling of the events from the reactive to the Vue is achieved; The lifecycle hook is aligned, namely the lifecycle hook of the Vue wrapper component is bound with the corresponding logic of the reaction component, and the rendering, updating and marking operation to be unloaded of the reaction component are synchronously executed in the lifecycle stage of the Vue wrapper component; And the cross-frame conversion from the slot to the child node comprises the steps of obtaining slot content transmitted by a Vue parent component in a rendering and bridging module, converting the slot content into a form recognizable by a reaction and mapping the form to the child node of the reaction component, and completing the cross-frame conversion from the slot to the child node.
  6. 6. The method of adapter mode based React component execution in Vue of claim 1, wherein the component initiates rendering, runtime interaction response, and state update, comprising: Initializing rendering, namely creating a reaction element by a rendering and bridging module when the Vue compatible reaction component is mounted for the first time, and rendering the reaction element into a DOM container preset by the Vue wrapper component; when the reaction component triggers interactive operation, synchronizing an interactive instruction of the Vue environment to the reaction component through rendering and bridging module to obtain cross-frame interactive response; and (3) state updating, namely triggering updating operation of the compact component by the rendering and bridging module when the attribute/state of the Vue or the compact side is changed, and finishing component state updating and view redrawing.
  7. 7. A system for executing a real component in a Vue based on an adapter schema, comprising: The acquisition module is used for acquiring a Vue wrapper component which is used as a bridging carrier between the real component and the Vue environment; the registration module is used for finishing component registration through the Vue wrapper component, and packaging the reaction component into a Vue global or local callable component to obtain a Vue compatible reaction component; The rendering bridging module is used for achieving Props bidirectional synchronization, event system mapping, life cycle hook alignment and cross-frame conversion from a slot to a child node based on the rendering and bridging module constructed by the Vue wrapper component, calling the Vue compatible type reaction component in a Vue environment, and completing component initialization rendering, runtime interaction response and state updating through the rendering and bridging module; and the unloading module is used for calling the rendering and bridging module through the Vue wrapper component to trigger the unloading flow of the reaction component when the Vue parent component is destroyed.
  8. 8. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor executing the program to implement the method of operating the adaptor mode based act component of any one of claims 1-6 in Vue.
  9. 9. A computer readable storage medium having stored thereon a computer program or instructions, which when executed, implement the method of executing the adaptor mode based reaction component of any one of claims 1-6 in Vue.
  10. 10. A computer program product comprising a computer program or instructions which, when executed, implement the method of executing the adaptor mode based act component of any one of claims 1 to 6 in Vue.

Description

Method for executing React component in Vue based on adapter mode Technical Field The invention belongs to the technical field of front-end cross-frame component multiplexing, and particularly relates to a method for running a real component in Vue based on an adapter mode. Background In the front-end Web development field, react and Vue are two main stream view layer frames, and are widely applied to development of various Web projects by virtue of core advantages such as componentization, response and the like. Along with the continuous development of technical ecology and the expansion of project scale, the coexistence scene of component libraries and subsystems developed by different frames is increasingly common, the requirement of collaborative operation of cross-frame components is becoming urgent, and the core requirement is that the integrated multiplexing of different frame technical assets and the unified expansion of product functions can be realized without rewriting the existing codes. The mainstream scheme for realizing the integration of cross-frame components in the current industry is micro front end architecture and iframe embedding. The micro front end architecture combines the applications in the runtime by splitting the applications into multiple independently developed and deployed mini applications, and the iframe embedding loads the heteroframework applications by creating independent browser contexts. However, the two schemes have obvious limitations that the integration granularity is concentrated at the page or application level, the fine granularity fusion of direct nesting of the Vue parent component and the act sub-component cannot be realized, the whole sub-application is required to be loaded or independent contexts are created during running, the memory consumption is increased, the initial loading time is prolonged, the overall performance loss is obvious, a developer needs to maintain two independent construction and deployment processes, communication between components depends on indirect modes such as postMessage and the like, the development complexity is improved, the state synchronization and event transmission efficiency is low, and the integration requirement of the refined and efficient cross-frame components is difficult to meet. Disclosure of Invention The application provides a method for running a real component in a Vue based on an adapter mode, which aims to solve the problems of poor flexibility, low performance, complex flow and the like in the prior art. The embodiment of the first aspect of the application provides a method for running a real component in a Vue based on an adapter mode, which comprises the steps of obtaining a Vue wrapper component serving as a bridging carrier of the real component and the Vue environment, finishing component registration through the Vue wrapper component, packaging the real component into a Vue global or local callable component to obtain a Vue compatible real component, achieving Props bidirectional synchronization, event system mapping, lifecycle hook alignment and cross-frame conversion from a slot to a child node based on a rendering and bridging module constructed by the Vue wrapper component, calling the Vue compatible real component in the Vue environment, finishing component initialization, running interaction response and state update through the rendering and bridging module, and calling the rendering and bridging module to trigger unloading of the real component through the Vue wrapper component when the Vue parent component is destroyed. Preferably, the method comprises the steps of obtaining a Vue wrapper component, wherein the method comprises the steps of calling a preset Vue wrapper component template, configuring basic parameters of the Vue wrapper component template according to the type of a to-be-integrated act component and version information of a Vue application based on the preset Vue wrapper component template, and instantiating the configured Vue wrapper component template into a callable Vue wrapper component to complete the obtaining of the Vue wrapper component. Preferably, component registration is completed through the Vue wrapper component, the reactive component is packaged into a Vue global or local callable component, the method comprises the steps of constructing a high-order packaging function, act2VueWrapper, transferring an original reactive component into the high-order packaging function as an entry, defining a Vue component configuration item, packaging the original reactive component into a registrable Vue component based on the Vue component configuration item, calling a vue.component method to complete global registration of the registrable Vue component if the registration is required as a Vue global component, declaring the registrable Vue component in a components option of a target Vue parent component to complete local registration, and generating the Vue compatible re