Method for realizing dynamic component introduction and real-time hot update based on Vue framework

Abstract

The invention discloses a method for realizing dynamic component introduction and real-time hot update based on a Vue framework, and relates to the technical field of computer software, and the method comprises the following steps: obtaining different types of dynamic components of a third party; determining a compiling environment corresponding to each dynamic component; connecting data of the dynamic components to bridge the dynamic components and corresponding compiling environments; carrying out secondary compiling on the preliminary execution template and the three-party package returned by the compiling environment; and mounting and rendering the structure returned by the secondary compilation on the page. According to the method, the compilation environment is determined for pre-compilation, and then secondary compilation is carried out, so that the duration of dynamic component rendering mounting can be shortened, and the hot update efficiency is improved.

Description

Technical Field

[0001] The present application relates to the field of computer software technology, and in particular to a method for implementing dynamic component introduction and real-time hot update based on a Vue framework. Background Art

[0002] Dynamic business components within the Vue framework refer to components dynamically introduced into a Vue-based platform, either from existing third-party platforms or generated based on services. These components typically require the platform to provide a fixed, strongly defined slot area within which the platform or project team can implement internal business functionality. Alternatively, they can be bound to the platform's built-in component business glue services. However, existing technical solutions for introducing third-party components still suffer from low efficiency. Summary of the Invention

[0003] The main purpose of the embodiments of the present application is to propose a method for implementing dynamic component introduction and real-time hot update based on the Vue framework, so as to provide a more convenient hot update and synchronization solution for introducing external third-party business components into the platform built on the Vue framework.

[0004] To achieve the above objectives, one aspect of an embodiment of the present application proposes a method for implementing dynamic component introduction and real-time hot update based on the Vue framework, the method comprising the following steps:

[0005] Obtain different types of dynamic components from third parties;

[0006] Determine the compilation environment corresponding to each of the dynamic components;

[0007] connecting data of the dynamic component to bridge the dynamic component with a corresponding compilation environment;

[0008] Performing secondary compilation on the preliminary execution template and the third-party package returned by the compilation environment;

[0009] The structure returned by the secondary compilation is mounted and rendered on the page.

[0010] In some embodiments, obtaining different types of dynamic components from a third party includes the following steps:

[0011] Obtain at least one of a UI layout component, a form validation component, a table data query and display component, a chart animation component, or a JS calculation component.

[0012] In some embodiments, determining the compilation environment corresponding to each of the dynamic components includes the following steps:

[0013] If the dynamic component is a UI layout component, a form validation component, a table data query display component, or a chart animation component, a pre-compiled request three-party package, a component template, and a pre-compiled environment are compiled as the compilation environment.

[0014] If the dynamic component is a JS calculation component, a worker service environment is pre-initialized as the compilation environment.

[0015] In some embodiments, the method further includes the following steps:

[0016] If the dynamic component is a UI layout component, a form validation component, a table data query display component, or a chart animation component, a pre-compiled request three-party package, a component template, and a pre-compiled environment are compiled as the compilation environment.

[0017] In some embodiments, the connection of the data of the dynamic component to bridge the dynamic component and the corresponding compilation environment includes the following steps:

[0018] The data connected to the dynamic component is used to bridge the dynamic component and the corresponding compilation environment through a Proxy proxy.

[0019] In some embodiments, the secondary compilation of the preliminary execution template and the three-party package returned by the compilation environment includes the following steps:

[0020] If the dynamic component is a UI layout component, a form validation component, a table data query display component, or a chart animation component, the compile function in @vue / core is used to input the preliminary execution template and the three-party package returned by the compilation environment for secondary compilation.

[0021] If the dynamic component is a JS calculation component, the worker parsing engine is used to perform secondary compilation on the preliminary execution template and the three-party package returned by the compilation environment.

[0022] In some embodiments, the mounting and rendering of the structure returned by the secondary compilation to the page includes the following steps:

[0023] The structure returned by the secondary compilation is mounted and rendered to the page using createApp().mounted(‘#app’) provided by the Vue platform.

[0024] To achieve the above object, another aspect of the embodiment of the present application proposes a device for realizing dynamic component introduction and real-time hot update based on a Vue framework, which comprises:

[0025] The component acquisition unit is configured to acquire third-party dynamic components of different types;

[0026] The compilation environment determination unit is configured to determine a compilation environment corresponding to each dynamic component;

[0027] The compilation environment connection unit is configured to connect data of the dynamic components to bridge the dynamic components and the corresponding compilation environments;

[0028] The secondary compilation unit is configured to perform secondary compilation on the preliminary execution template returned by the compilation environment and the third-party package;

[0029] The mounting and rendering unit is configured to mount and render the structure returned by the secondary compilation to a page.

[0030] To achieve the above object, another aspect of the embodiment of the present application provides an electronic device, which comprises a memory and a processor, the memory stores a computer program, and the processor implements the above method when executing the computer program.

[0031] To achieve the above object, another aspect of the embodiment of the present application provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the above method.

[0032] The embodiment of the present application at least has the following beneficial effects:

[0033] The present application can acquire third-party dynamic components of different types, determine a compilation environment corresponding to each dynamic component, connect data of the dynamic components to bridge the dynamic components and the corresponding compilation environments, perform secondary compilation on a preliminary execution template returned by the compilation environment and a third-party package, and mount and render a structure returned by the secondary compilation to a page. The present application can reduce the time length of dynamic component mounting and rendering and improve hot update efficiency by determining a compilation environment for pre-compilation and then performing secondary compilation. BRIEF DESCRIPTION OF DRAWINGS

[0034] To more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiment description. Obviously, the drawings in the following description are only some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort based on these drawings.

[0035] Figure 1 The flowchart of the method for realizing dynamic component introduction and real-time hot update based on the Vue framework provided by the embodiment of the present application;

[0036] Figure 2A flowchart of a method for implementing dynamic component import and real-time hot update based on a Vue framework is provided for an embodiment of the present application.

[0037] Figure 3 A structural schematic diagram of an apparatus for implementing dynamic component import and real-time hot update based on a Vue framework is provided for an embodiment of the present application.

[0038] Figure 4 A hardware structural schematic diagram of an electronic device is provided for an embodiment of the present application. DETAILED DESCRIPTION

[0039] In order to make the purposes, technical solutions and advantages of the present application clearer, the present application is further described in detail below in combination with the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with embodiments of the present application. They are only examples of devices and methods consistent with some aspects of the embodiments of the present application as detailed in the appended claims.

[0040] It can be understood that the terms "first", "second", and the like used in the present application can be used herein to describe various concepts, but unless specifically stated, these concepts are not limited by these terms. These terms are only used to distinguish one concept from another. For example, without departing from the scope of the embodiments of the present application, the first information can also be referred to as the second information, and similarly, the second information can also be referred to as the first information. Depending on the context, the word "if" as used herein can be interpreted as "when" or "when" or "in response to determining".

[0041] The terms "at least one", "multiple", "each", "any" and the like used in the present application include one, two or more than two, multiple includes two or more than two, each refers to each of the corresponding multiple, and any refers to any one of the multiple.

[0042] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as understood by a person skilled in the art to which the present application belongs. The terms used herein are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0043] The embodiment of the application provides a method for realizing dynamic component introduction and real-time hot update based on a Vue framework, and relates to the technical field of computer software.The method for realizing dynamic component introduction and real-time hot update based on the Vue framework provided by the embodiment of the application can be applied to a terminal, can also be applied to a server, and can be software running in the terminal or the server.In some embodiments, the terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, a vehicle-mounted terminal and the like, but is not limited to this;the server end can be configured as an independent physical server, can also be configured as a server cluster or a distributed system formed by multiple physical servers, can also be configured as a cloud server for providing basic cloud computing services such as cloud service, cloud database, cloud computing, cloud function, cloud storage, network service, cloud communication, middleware service, domain name service, security service, CDN and big data and artificial intelligence platform, and the server can also be a node server in a blockchain network;the software can be an application for realizing the method for realizing dynamic component introduction and real-time hot update based on the Vue framework, and the like, but is not limited to the above forms.

[0044] The application can be used in many general or specific computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and the like. The application can be described in the general context of computer-executable instructions executed by a computer, such as a program module. Generally, program modules include routines, programs, objects, components, data structures, and the like that perform specific tasks or implement specific abstract data types. The application can also be practiced in a distributed computing environment, in which tasks are performed by remote processing devices connected by a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media, including storage devices.

[0045] Reference Figure 1 The embodiment of the application provides a method for realizing dynamic component introduction and real-time hot update based on a Vue framework, which can include but is not limited to S100 to S140, and specifically as follows:

[0046] S100: acquiring third-party dynamic components of different types;

[0047] S110: determining a compiling environment corresponding to each dynamic component;

[0048] S120: connecting data of the dynamic components to bridge the dynamic components and the corresponding compiling environments;

[0049] S130: performing secondary compilation on the preliminary execution template and the third-party package returned by the compilation environment;

[0050] S140: mounting the structure returned by the secondary compilation to the page for rendering.

[0051] Optionally, the obtaining of the third-party dynamic components of different types comprises the following steps:

[0052] The at least one of the UI layout component, the form verification component, the table data query and display component, the chart animation component, or the JS calculation component is obtained.

[0053] Optionally, the determining of the compilation environment corresponding to each dynamic component comprises the following steps:

[0054] If the dynamic component is the UI layout component, the form verification component, the table data query and display component, or the chart animation component, a pre-compilation request third-party package, a component template, and a pre-compilation environment are built as the compilation environment.

[0055] If the dynamic component is the JS calculation component, a worker service environment is pre-initialized as the compilation environment.

[0056] Optionally, the method further comprises the following steps:

[0057] If the dynamic component is the UI layout component, the form verification component, the table data query and display component, or the chart animation component, a pre-compilation is performed on the template in the dynamic component by using @vue / core-compile-plugin, and the pre-compilation is used to extract a cache for hot updating of the dynamic component.

[0058] Optionally, the connecting of the data of the dynamic component to bridge the dynamic component and the corresponding compilation environment comprises the following steps:

[0059] The data of the dynamic component is connected to bridge the dynamic component and the corresponding compilation environment by using a Proxy proxy.

[0060] Optionally, the performing of the secondary compilation on the preliminary execution template and the third-party package returned by the compilation environment comprises the following steps:

[0061] If the dynamic component is the UI layout component, the form verification component, the table data query and display component, or the chart animation component, a secondary compilation is performed according to a compile function in @vue / core, and the preliminary execution template and the third-party package returned by the compilation environment are input into the secondary compilation.

[0062] If the dynamic component is a JS calculation class component, the preliminary execution template and the three-party package returned by the compilation environment are recompiled using a worker parsing engine.

[0063] Optionally, the structure returned by the recompilation is mounted and rendered onto the page, including the following steps:

[0064] The structure returned by the recompilation is mounted and rendered onto the page using createApp().mounted(' #app ') provided by the Vue platform.

[0065] Next, the scheme of the embodiments of the present application will be described and explained in detail in combination with specific application examples.

[0066] Reference Figure 2 The embodiments provide an optional method for realizing dynamic component introduction and real-time hot update based on a Vue framework.

[0067] Specifically, the embodiments can include the following technical solutions:

[0068] The dynamic component is mainly divided into five custom component types according to project requirements:

[0069] 1. UI layout class component, representing a basic UI display component that does not interact with the outside world and only involves browser interaction, which is often used in the initial version of the project;

[0070] 2. Form verification class component, representing a form type collection control that is often required to interact with the outside world, such as input, output, disable, and verification;

[0071] 3. Table data query display class component, representing a list display component that uses a table to display data when the data volume is large, which generally includes common interactions such as query and pagination;

[0072] 4. Chart animation class component, representing a component that displays animated charts in graph theory, which usually involves mathematical graph theory, matrix theory, and other high-concurrency and high-performance component interactions;

[0073] 5. JS calculation class component, representing a pure calculation and statistics class component, which usually involves a large amount of underlying mathematical operations, high-energy consumption, and high-GPU data calculation interactions;

[0074] Node description:

[0075] Step node: precompile request three-party package, compile component template, and build precompilation environment.

[0076] There are scenarios in dynamic components where third-party libraries are introduced, which cannot be directly executed on the Vue platform, so it is necessary to build a compilation environment. The operation is: use the stackoverflow package to modify the nodejs library and simulate a local nodejs build environment through the workder bridge.

[0077] Pre-compiled request third-party package: import the package returned by the request into the pre-compiled environment above for cache analysis, and use the browser's ref="preconnect" function for compilation caching.

[0078] Compile component template: use the official library @vue / core-compile-plugin to pre-compile the template in the dynamic component for fast extraction and caching of hot-updated components.

[0079] Step node: pre-initialize the workder service environment.

[0080] Due to the high CPU computing power consumption characteristics of JS computing class components, a separate service environment is needed to execute the rendering of the component. At the same time, due to the synchronous execution characteristics of JS in the browser, it cannot be forced to wait for the completion of the calculation. Therefore, a new thread environment is needed to independently calculate the component by using the browser's official workder. The specific implementation is: use newWindow.Workder(“. / compiler.js”) to open a new thread, and then import the nodejs compilation package in compiler.js. Finally, return a js calculation component API for calling.

[0081] Step node: connect service component data, Proxy proxy bridge compilation environment and component.

[0082] The function of this step is to bridge the dynamic component and the compilation environment. Proxy proxy is a built-in proxy listening API in the browser. By using this API, the above-mentioned compilation environment can be quickly bridged, and the data changes of the dynamic component can also be monitored in real time. The specific implementation is to use the API: new window.Proxy(compile environment, dynamic component) to initialize the proxy function, and then return the value to @vue / core's deep-watch for deep data monitoring. Then use the webpack-hrm-plugin plugin to hot update the compilation environment, and finally proxy the proxy to the vue page onmounted.

[0083] Step node: push @vue / core compilation package to build compilation.

[0084] This step is to import the preliminary execution template returned by the compilation environment according to the previous step and the three-party npm package data into the secondary compilation of the compilation API provided by Vue. The specific steps are: using the compile function in @vue / core to pass in the results of the above steps for secondary compilation.

[0085] Step node: push into the worker parsing engine for execution.

[0086] The function of this step is to use the worker service environment of the above step to quickly execute JS-intensive computing GPU with the multi-threading function of the browser, and the return value is a data equivalent to a JS computing value.

[0087] Step node: mount the returned structure using vue.createApp.mounted to render to the page.

[0088] This step is the return value of the previous step, which is an intermediate JS execution state data compiled by @vue / core. It needs to be mounted and rendered on the page. The specific implementation is to use the createApp().mounted(' #app') provided by the Vue platform to pass in the JS execution state data to mount and render to the page.

[0089] The beneficial effects of the embodiment include:

[0090] 1. It makes up for the long user experience of dynamic components in rendering and mounting;

[0091] 2. It ensures the high-performance synchronization of dynamic components in real-time rendering and updating to the page after multiple synchronous updates;

[0092] 3. It greatly reduces the frequency of hot update restart failure of dynamic component rendering.

[0093] Referring to Figure 3 , the embodiment of the application also provides a device for implementing dynamic component import and real-time hot update based on a Vue framework, which can implement the method for implementing dynamic component import and real-time hot update based on a Vue framework as described above. The device comprises:

[0094] A component acquisition unit is configured to acquire third-party dynamic components of different types.

[0095] A compilation environment determination unit is configured to determine the compilation environment corresponding to each dynamic component.

[0096] A compilation environment connection unit is configured to connect the data of the dynamic components to bridge the dynamic components and the corresponding compilation environment.

[0097] A secondary compiling unit is configured to perform secondary compiling on the preliminary execution template and the three-party package returned by the compiling environment.

[0098] A mounting rendering unit is configured to mount and render the structure returned by the secondary compiling onto a page.

[0099] It can be understood that the content in the above method embodiments is applicable to the device embodiments, the device embodiments specifically implement the functions of the above method embodiments, and achieve the same beneficial effects as the above method embodiments.

[0100] The embodiment of the present application further provides an electronic device, which comprises a memory and a processor. The memory stores a computer program, and the processor executes the computer program to implement the method of the embodiment of the present application. The electronic device can be any intelligent terminal, such as a tablet computer or a vehicle-mounted computer.

[0101] It can be understood that the content in the above method embodiments is applicable to the device embodiments, the device embodiments specifically implement the functions of the above method embodiments, and achieve the same beneficial effects as the above method embodiments.

[0102] Please refer to Figure 4 , Figure 4 The hardware structure of the electronic device of another embodiment is illustrated, and the electronic device comprises:

[0103] The processor 401 can be implemented in the form of a general-purpose CPU (Central Processing Unit), a microprocessor, an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits, and is configured to execute a related program to implement the technical solutions provided by the embodiments of the present application.

[0104] The memory 402 can be implemented in the form of a ROM (Read Only Memory), a static storage device, a dynamic storage device, or a RAM (Random Access Memory). The memory 402 can store an operating system and other application programs. When the technical solutions provided by the embodiments of the present application are implemented by software or firmware, the related program codes are stored in the memory 402 and are called and executed by the processor 401 to implement the method of the embodiments of the present application.

[0105] The input / output interface 403 is configured to implement information input and output.

[0106] The communication interface 404 is configured to realize the communication interaction between the device and other devices. The communication can be realized through a wired manner (for example, a USB, a network cable, and the like) or a wireless manner (for example, a mobile network, WIFI, Bluetooth, and the like).

[0107] The bus 405 is configured to transmit information between various components (for example, the processor 401, the memory 402, the input / output interface 403, and the communication interface 404) of the device.

[0108] The processor 401, the memory 402, the input / output interface 403, and the communication interface 404 are connected to each other through the bus 405.

[0109] The embodiment of the present application further provides a computer readable storage medium, which stores a computer program. The computer program is executed by a processor to realize the method of the present application.

[0110] It can be understood that the contents in the above method embodiments are applicable to the storage medium embodiments. The storage medium embodiments specifically realize the functions of the above method embodiments, and achieve the same beneficial effects as the above method embodiments.

[0111] The memory is a non-transitory computer readable storage medium, which can be used to store a non-transitory software program and a non-transitory computer executable program. In addition, the memory can include a high-speed random access memory, and can further include a non-transitory memory, for example, at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state memory device. In some embodiments, the memory can optionally include a memory remotely arranged relative to the processor. These remote memories can be connected to the processor through a network. Examples of the network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof.

[0112] The embodiments described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application, and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0113] Those skilled in the art can understand that the technical solutions shown in the figures do not constitute a limitation on the embodiments of the present application, and can include more or fewer steps than the figures, or combine certain steps, or different steps.

[0114] The apparatus embodiments described above are merely exemplary, and the units described as separate units can or can not be physically separate, i.e., can be located in one place, or can be distributed over multiple network units. Part or all of the modules can be selected according to actual needs to achieve the purpose of the embodiment.

[0115] Those skilled in the art can understand that all or some of the steps in the method disclosed above, the functional modules / units in the system and the device can be implemented as software, firmware, hardware and appropriate combinations thereof.

[0116] The terms "first", "second", "third", "fourth" and the like in the description of the application and in the claims of the foregoing drawings, if any, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the use of the terms so construed can be interchanged, such that the embodiments of the application described herein can be carried out in other than the order discussed herein without departing from the scope of the application. Further, the terms "comprise" and "comprising" and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, product or apparatus that comprises a list of steps or units does not necessarily comprise only those steps or units but can include other not expressly listed steps or units.

[0117] It should be understood that in the present application, "at least one" means one or more, and "multiple" means two or more. "And / or" is used to describe the relationship between associated objects, which means that there can be three relationships, for example, "A and / or B" can mean that there are three cases: only A, only B, and A and B at the same time, where A and B can be singular or plural. The character " / " generally represents that the associated objects before and after are in an "or" relationship. "At least one of the following" or the like means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b or c can mean a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0118] In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented by other manners. For example, the apparatus embodiments described above are merely illustrative, for example, the division of the above units is merely a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units or components shown or discussed can be indirect coupling or communication connection through some interfaces, apparatuses or units, and can be electrical, mechanical or other forms.

[0119] The units described above as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, i.e. they can be located in one place or distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiment.

[0120] In addition, the functional units in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0121] If the integrated unit is realized in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the part of the prior art that makes a contribution or the whole or part of the technical solutions can be embodied in the form of a software product, which is stored in a storage medium and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method of each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various program storage media.

[0122] The preferred embodiments of the embodiments of the present application are described above with reference to the accompanying drawings, but this does not limit the scope of the rights of the embodiments of the present application. Any modification, equivalent replacement and improvement made by those skilled in the art without departing from the scope and essence of the embodiments of the present application shall be within the scope of the rights of the embodiments of the present application.

Claims

1. A method for implementing dynamic component introduction and real-time hot update based on the Vue framework, characterized in that: The method comprises the following steps: Obtain different types of dynamic components from third parties; Determine the compilation environment corresponding to each of the dynamic components; connecting data of the dynamic component to bridge the dynamic component with a corresponding compilation environment; Performing secondary compilation on the preliminary execution template and the third-party package returned by the compilation environment; The structure returned by the secondary compilation is mounted and rendered on the page.

2. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to claim 1 is characterized in that: The method of obtaining different types of third-party dynamic components includes the following steps: Obtain at least one of a UI layout component, a form validation component, a table data query and display component, a chart animation component, or a JS calculation component.

3. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to claim 1 is characterized in that: Determining the compilation environment corresponding to each dynamic component includes the following steps: If the dynamic component is a UI layout component, a form validation component, a table data query and display component, or a chart animation component, precompile the request to the third-party package, compile the component template, and build a precompile environment as the compilation environment; If the dynamic component is a JS computing component, the workder service environment is pre-initialized as the compilation environment.

4. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to claim 3 is characterized in that: The method further comprises the following steps: If the dynamic component is a UI typesetting component, a form validation component, a table data query and display component, or a chart animation component, the @vue / core-compile-plugin is used to precompile the template in the dynamic component to extract the cache for hot updating of the dynamic component.

5. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to claim 1 is characterized in that: The step of connecting the data of the dynamic component to bridge the dynamic component with the corresponding compilation environment includes the following steps: Connect the data of the dynamic component and bridge the dynamic component with the corresponding compilation environment through a Proxy agent.

6. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to claim 1 is characterized in that: The secondary compilation of the preliminary execution template and the third-party package returned by the compilation environment includes the following steps: If the dynamic component is a UI layout component, a form validation component, a table data query and display component, or a chart animation component, the initial execution template and the third-party package returned by the compilation environment are passed in according to the compile function in @vue / core for secondary compilation; If the dynamic component is a JS computing component, the worker parsing engine is used to perform secondary compilation on the preliminary execution template and the third-party package returned by the compilation environment.

7. The method for implementing dynamic component introduction and real-time hot update based on the Vue framework according to any one of claims 1 to 6, characterized in that: The step of mounting and rendering the structure returned by the secondary compilation onto the page includes the following steps: Use createApp().mounted('#app') provided by the Vue platform to mount the structure returned by the secondary compilation and render it on the page.

8. A device for implementing dynamic component introduction and real-time hot update based on the Vue framework, characterized in that: The device comprises: Component acquisition unit, used to obtain different types of dynamic components from third parties; A compilation environment determination unit, configured to determine the compilation environment corresponding to each of the dynamic components; A compilation environment connection unit, configured to connect data of the dynamic component to bridge the dynamic component with the corresponding compilation environment; A secondary compilation unit, configured to perform secondary compilation on the initial execution template and the third-party package returned by the compilation environment; The mounting and rendering unit is used to mount and render the structure returned by the secondary compilation onto the page.

9. An electronic device, characterized in that: The electronic device includes a memory and a processor, the memory stores a computer program, and the processor implements the method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images