Data processing method and device for page update

Abstract

The embodiments of this specification provide a data processing method and device for page update, wherein the data processing method for page update includes: storing the three-dimensional model of the front-end page in Vuex of Vue, and managing the three-dimensional model using the state management mechanism of Vuex; monitoring the three-dimensional model through Vue, and updating the front-end page in response to the update of the three-dimensional model; if the target component corresponding to the target three-dimensional model to be destroyed is monitored, calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed, wherein the target component is the component in Vue that manages the target three-dimensional model. This method stores the three-dimensional model of the front-end page in Vuex of Vue, and manages the three-dimensional model using the state management mechanism of Vuex. When the state of the three-dimensional model changes, based on the state pair of the three-dimensional model, the data in the memory is updated based on the update of the three-dimensional model data, thereby avoiding the occurrence of memory overflow due to the need to process a large amount of data on the page.

Description

Technical Field

[0001] The embodiments of the present specification relate to the field of Internet technology, and in particular to a data processing method for page update. Background Art

[0002] In the prior art, when a page needs to load a large three-dimensional model, there will be obvious frame drops and freezes, as well as a continuous and substantial increase in memory usage. This situation not only occupies a large amount of memory, but also affects the user experience.

[0003] Therefore, there is an urgent need to provide a more reliable page loading solution. Summary of the invention

[0004] In view of this, an embodiment of this specification provides a data processing method for page update. One or more embodiments of this specification also relate to a data processing device for page update, a computing device, a computer-readable storage medium and a computer program to solve the technical defects existing in the prior art.

[0005] According to a first aspect of an embodiment of this specification, a data processing method for page update is provided, comprising:

[0006] The three-dimensional model of the front-end page is stored in Vuex of Vue, and the three-dimensional model is managed by using the state management mechanism of Vuex;

[0007] Monitor the three-dimensional model through the Vue, and update the front-end page in response to the update of the three-dimensional model;

[0008] If the target component corresponding to the target three-dimensional model to be destroyed is monitored, Three.js is called to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed, wherein the target component is the component in the Vue that manages the target three-dimensional model.

[0009] In one embodiment of the present disclosure, monitoring the three-dimensional model through the Vue and updating the front-end page in response to the update of the three-dimensional model includes:

[0010] The update of the three-dimensional model is monitored through the monitoring function of the Vue, and the front-end page is updated based on the return value of the monitoring function.

[0011] In one embodiment of the present disclosure, calling Three.js to destroy related objects of the target three-dimensional model layer by layer before destroying the target component includes:

[0012] Before the target component is destroyed, the related objects of the target three-dimensional model in the Three.js are traversed, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

[0013] In one embodiment of the present disclosure, traversing the related objects of the target three-dimensional model in the Three.js and calling the life cycle management function of the Three.js to destroy the related objects layer by layer includes:

[0014] The life cycle hook function of the Vue is called to traverse the related objects of the target three-dimensional model, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

[0015] In one embodiment of the present disclosure, after calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed, the method further includes:

[0016] Unbinding the listener bound to the target three-dimensional model;

[0017] Destroy the target component in the Vue.

[0018] In one embodiment of the present disclosure, the method further includes:

[0019] The animation is rendered in the front-end page using a request animation frame interface, wherein the request animation frame interface is used to instruct the front-end page to cyclically call back a specified callback function to update the animation.

[0020] In one embodiment of the present disclosure, after calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed, the method further includes:

[0021] When the target component is destroyed in the Vue, the loop callback is canceled using the cancel animation frame interface to clear the animation.

[0022] According to a second aspect of an embodiment of this specification, a data processing device for page update is provided, including:

[0023] A management module is configured to store the three-dimensional model of the front-end page in Vuex of Vue, and manage the three-dimensional model using the state management mechanism of Vuex;

[0024] An updating module, configured to monitor the three-dimensional model through the Vue, and update the front-end page in response to the update of the three-dimensional model;

[0025] The destruction module is configured to call Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed if the target component corresponding to the target three-dimensional model to be destroyed is monitored, wherein the target component is the component in the Vue that manages the target three-dimensional model.

[0026] According to a third aspect of an embodiment of this specification, a computing device is provided, including:

[0027] Memory and processor;

[0028] The memory is used to store computer executable instructions, and the processor is used to execute the computer executable instructions. When the computer executable instructions are executed by the processor, the steps of the data processing method for page update are implemented.

[0029] According to a fourth aspect of the embodiments of this specification, a computer-readable storage medium is provided, which stores computer-executable instructions, and when the instructions are executed by a processor, the steps of the data processing method for page update are implemented.

[0030] According to a fifth aspect of the embodiments of this specification, a computer program is provided, wherein when the computer program is executed in a computer, the computer is caused to execute the steps of the data processing method for page update.

[0031] An embodiment of the present specification stores the three-dimensional model of the front-end page in Vuex of Vue, and manages the three-dimensional model by using the state management mechanism of Vuex. When the state of the three-dimensional model changes, the data in the memory is updated based on the state of the three-dimensional model, thereby avoiding memory overflow caused by the need to process a large amount of data on the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 is a flow chart of a data processing method for page update provided by an embodiment of this specification;

[0033] Figure 2 is a processing flow chart of another data processing method for page update provided by an embodiment of this specification;

[0034] Figure 3 It is a structural schematic diagram of a data processing device for page update provided by an embodiment of this specification;

[0035] Figure 4 It is a structural block diagram of a computing device provided by an embodiment of this specification. DETAILED DESCRIPTION

[0036] Many specific details are described in the following description to facilitate a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the connotation of this specification, so this specification is not limited to the specific implementation disclosed below.

[0037] The terms used in one or more embodiments of this specification are only for the purpose of describing specific embodiments, and are not intended to limit one or more embodiments of this specification. The singular forms of "a", "said" and "the" used in one or more embodiments of this specification and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items.

[0038] It should be understood that although the terms first, second, etc. may be used to describe various information in one or more embodiments of this specification, this information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of one or more embodiments of this specification, the first may also be referred to as the second, and similarly, the second may also be referred to as the first. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".

[0039] In addition, it should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in one or more embodiments of this specification are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0040] First, the terms involved in one or more embodiments of this specification are explained.

[0041] Vue: A JavaScript framework for building user interfaces, primarily used for developing web applications.

[0042] Vuex: A state management mode developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

[0043] In this specification, a data processing method for page update is provided. This specification also relates to a data processing device for page update, a computing device, and a computer-readable storage medium, which are described in detail one by one in the following embodiments.

[0044] See also Figure 1 , Figure 1 A flow chart of a data processing method for page update provided according to an embodiment of the present specification is shown, which specifically includes steps 102 to 106.

[0045] Step 102: Store the three-dimensional model of the front-end page in Vuex of Vue, and manage the three-dimensional model using the state management mechanism of Vuex.

[0046] Among them, the front-end page specifically refers to the front-end part of the website, which runs on the PC, mobile and other browsers and is displayed to users for browsing; the three-dimensional model specifically refers to the object designed in proportion with the scene, characters and props. It is a scene animation building model created by the designer. The three-dimensional model can include at least one of the scene model, building model, animation model, character model and prop model used by the character. The three-dimensional model data usually includes the following: 1. Geometric parameters: including the shape, size, position, rotation and other geometric properties of the three-dimensional model; 2. Material parameters: including the color, texture, reflectivity, refractive index and other material properties of the three-dimensional model; 3. Lighting parameters: including the three-dimensional model 1. The light source, ambient light, shadow and other lighting properties of the model; 2. Motion parameters: If it is an animated model, it also needs to include animation rate, animation sequence, keyframes and other action properties; 3. Rendering parameters: including rendering algorithm, rendering quality, rendering resolution and other rendering properties; 4. Export parameters: including export format, export options, export path and other export properties; These data can be set and adjusted through the interface or programming interface of the 3D modeling software; The core of each Vuex application is Store, which can be specifically regarded as a container. The data status in Store cannot be changed directly, so Vuex's state management mechanism is needed to manage it. The state management mechanism of Vuex specifically refers to the mechanism for managing the 3D model data stored in Vuex. Vuex specifically implements the management of 3D model data through at least one of state, mutation, getter and action; among them, state specifically refers to the storage state of 3D model data, mutation is used to change the data stored in Vuex's Store, and the only way to change the modified state in Vuex's store is to submit a mutation. A mutation is similar to an event: each mutation has a string event type (type) and a callback function (handler). It should be noted that only data can be updated synchronously in mutations, and asynchronous operations cannot be performed. Otherwise, when the state changes, the page may not be updated yet, which will lead to inconsistency between the page and the state, that is, it is impossible to monitor the change of data and update the page. Action can contain any asynchronous operation. When the asynchronous operation is completed, action calls mutation to change the state, thereby achieving consistency between the page and the state. Getter is responsible for processing state members to the outside world.

[0047] In the specific implementation, Vuex is used to manage the 3D model data, and Vuex's mutation, getter, action and other mechanisms are used to manage and update the 3D model data. The shared state between multiple components is handed over to Vuex for management, so as to achieve the decoupling of state changes and communication between components, making the management and interaction of 3D model data more convenient and quick, and improving development efficiency.

[0048] Step 104: Monitor the three-dimensional model through the Vue, and update the front-end page in response to the update of the three-dimensional model.

[0049] Generally, data monitoring in Vue is implemented based on the Object.defineProperty() method in JavaScript. When the Vue instance is initialized, the Object.defineProperty() method will traverse the data object in the instance and use the Object.defineProperty() method to convert each property and object into a getter and setter. In this way, when the data in the Vue instance is accessed and modified, Vue will capture these access and modification operations through getters and setters and trigger corresponding updates.

[0050] In the getter, Vue will establish a connection between the current property and the component being rendered, thereby establishing a dependency relationship. When the property is read, Vue will add the dependency to the dependency list of the current component. In the setter, Vue will notify the corresponding dependency to update. In this way, when the property is modified, all components that depend on the property will be notified to update, thereby keeping the view synchronized.

[0051] However, in applications with complex data structures, such as large models in Three.js, Vue's data monitoring mechanism cannot handle it directly. This is because Object.defineProperty() can only intercept the reading and modification of object properties, while modifications to the object itself or elements in the array cannot be tracked by Vue.

[0052] Therefore, it is not feasible to place large model data in Vue's data(). This will not only cause Vue's responsive system to be unable to correctly track and process changes in model data, but also cause the browser to have memory overflow problems when processing large amounts of data. In order to solve the problem of memory overflow caused by some data not being tracked by Vue, the model data can be placed in the computed property for monitoring. The specific implementation steps are as follows:

[0053] The monitoring the three-dimensional model through the Vue and updating the front-end page in response to the update of the three-dimensional model includes:

[0054] The update of the three-dimensional model is monitored through the monitoring function of the Vue, and the front-end page is updated based on the return value of the monitoring function.

[0055] In specific implementation, the monitoring of the three-dimensional model is realized by placing the three-dimensional model in the computed property of Vue. When the three-dimensional model data stored in the computed property does not change, the calculation process will not be executed, and the data in the cache will not change. However, since the computed property is a dependent property, it can monitor the changes in the three-dimensional model data and respond to the changes in the three-model model data, and update the model display content in time, so as to achieve real-time access and update of large three-dimensional models. Of course, the computed property will only be re-evaluated when the responsive dependency changes. This means that as long as the responsive dependency does not change, multiple accesses to the computed property will immediately return the previous calculation results without having to perform the calculation again. The beneficial effect of using the computed property to store the three-dimensional model is that it can monitor the changes in the three-dimensional model and update the memory data based on the changed data, reducing the memory occupied by the data. At the same time, it also ensures that the component reflects the page scene of Three.js before it is destroyed.

[0056] In addition, the watch function can also be used to monitor changes in 3D model data and respond to the changes. The watch function specifically refers to whether the monitored data has been modified. Once modified, some other logical operations can be executed. It is generally used for asynchronous and high-overhead operations and when the attributes in the 3D model change, the watch function needs to be used when the corresponding operation needs to be performed. Specifically, the watch function includes immediate and deep attributes. The immediate attribute specifically refers to immediate processing, which is triggered when entering the front-end page. When the immediate attribute is set to true, it will monitor all the time regardless of whether the value changes; when the immediate attribute is set to false, it will only monitor when the value changes; the deep attribute specifically refers to deep monitoring, which can monitor changes in certain data. Under normal circumstances, when using the watch function for monitoring, there will be a situation where changes in the 3D model cannot be monitored. After turning on the deep attribute, changes in the 3D model data can be monitored.

[0057] Step 106: If the target component corresponding to the target 3D model to be destroyed is monitored, Three.js is called to destroy the related objects of the target 3D model layer by layer before the target component is destroyed, wherein the target component is the component in the Vue that manages the target 3D model.

[0058] The target 3D model to be destroyed specifically refers to the 3D model to be deleted. The target 3D model to be destroyed may include one or more. In Vue, the 3D model may correspond to different Vue components. The target component specifically refers to the component corresponding to the target 3D model to be destroyed. Three.js is a JavaScript library for creating and displaying 3D graphics in a web browser.

[0059] In general, when a user deletes a 3D model on a front-end page, the 3D model is determined as a target 3D model to be destroyed, or when a user switches front-end pages, that is, jumps from one front-end page to another, all 3D models in the front-end page are determined as target 3D models to be destroyed. In Vue, components go through a series of life cycle stages from creation to destruction. When switching routes, the beforeDestroy() and destroyed() life cycle hook functions need to be called to release the model; while the Three.js library creates 3D rendering in the browser through the WebGL rendering API. All objects in WebGL (such as textures, buffers, shaders, etc.) must be released manually to release memory, so it is necessary to determine how Vue and Three.js interact. Specifically, in Vue's beforeDestroy() or destroyed() hook function, traverse the objects in the scene and call the dispose() method to clean up resources, such as destroying scenes, renderers, materials, geometries, textures, and other objects one by one. This also includes camera, light source, and shadow related settings, which are specifically implemented through the following steps:

[0060] The calling of Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed includes:

[0061] Before the target component is destroyed, the related objects of the target three-dimensional model in the Three.js are traversed, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

[0062] Specifically, Three.js contains the data of each 3D model and its related objects in the scene. Because each data is stored in the form of a tree, it is necessary to destroy it layer by layer when destroying it, first destroying the child object and then destroying the parent object. For example: the scene is the parent object and the renderer is the child object, then destroy the renderer first and then the scene.

[0063] The traversing the related objects of the target three-dimensional model in the Three.js and calling the life cycle management function of the Three.js to destroy the related objects layer by layer includes:

[0064] The life cycle hook function of the Vue is called to traverse the related objects of the target three-dimensional model, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

[0065] Among them, the life cycle of Vue specifically refers to the process from the creation to the destruction of the Vue instance. The life cycle hook function is the various events triggered in the Vue life cycle. These events are called life cycle hook functions. In the Vue life cycle, most of them are divided into four stages: creation, mounting, updating, and destruction. These four stages each correspond to two life cycle hooks. The life cycle hook function of Vue called in this embodiment specifically refers to beforeDestroy(), which calls beforeDestroy() to destroy the component before it is destroyed.

[0066] In specific implementation, in Vue's beforeDestroy(), traverse the objects in the scene and call the dispose() method to destroy the related objects of the target 3D model. At the same time, in order to ensure that the related objects of the target 3D model can be completely destroyed, you can also call destroyed() after the component is destroyed, traverse the objects in the scene again and call the dispose() method to destroy the related objects of the target 3D model.

[0067] Before destroying the component, make sure to unbind all event listeners associated with the model to avoid memory leaks. To achieve this, follow these steps:

[0068] After calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before destroying the target component, the method further includes:

[0069] Unbind the listener bound to the target three-dimensional model; and destroy the target component in the Vue.

[0070] Specifically, the listener refers to an event listener, and events include keyboard events, mouse events, and other custom events; custom events refer to events that are customized by those skilled in the art to implement certain logic.

[0071] In specific implementation, the listener bound to the target three-dimensional model may be unbound before the target component is destroyed, or the listener bound to the target three-dimensional model may be unbound after the target component is destroyed.

[0072] In addition to destroying objects as described above, you can also clear animation loops.

[0073] The method further comprises:

[0074] The animation is rendered in the front-end page using a request animation frame interface, wherein the request animation frame interface is used to instruct the front-end page to cyclically call back a specified callback function to update the animation.

[0075] After calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before destroying the target component, the method further includes:

[0076] When the target component is destroyed in the Vue, the loop callback is canceled using the cancel animation frame interface to clear the animation.

[0077] Among them, the request animation frame interface specifically refers to the interface provided by the browser for optimizing animation and rendering. Based on the refresh rate of the browser, the execution of the callback function is scheduled to ensure the smoothness and high performance of the animation and rendering, that is, request animation frames. In specific implementation, requestAnimationFrame can be used to request animation frames and trigger the rendering cycle. RequestAnimationFrame requests to execute a function before each browser refreshes the frame. The browser will call this function at the appropriate time to ensure the coordination of animation and rendering. Through cooperation with the browser, requestAnimationFrame can avoid unnecessary rendering operations and ensure that the animation effect is smoother. For example, the browser refreshes every 16.7ms, and the animation callback is also called every 16.7ms, so there will be no problem of over-drawing, and the animation will not drop frames, and it will be naturally smooth. Canceling the animation frame interface specifically refers to canceling the animation frame request previously created by the request animation frame interface. In specific implementation, cancelAnimationFrame can be used. This function can be used to cancel the animation frame request previously created by the request animation frame interface, that is, cancel the rendering cycle.

[0078] In specific implementation, the loop callback and the animation can be canceled by using the cancel animation frame interface before the target component is destroyed, or the loop callback and the animation can be canceled by using the cancel animation frame interface after the target component is destroyed.

[0079] The following combination Figure 2 , another data processing method for page update provided in this specification is used to further illustrate the data processing method for page update. Figure 2 A processing flow chart of a data processing method for page update provided in an embodiment of the present specification is shown, which specifically includes the following steps.

[0080] Step 202: Store the three-dimensional building model of the front-end page in Vuex of Vue, and use the mutation, action, and getter of Vuex to manage the three-dimensional building model.

[0081] Step 204: Monitor the update of the three-dimensional building model through the Vue's listener function computed, and update the front-end page based on the return value of the listener function computed.

[0082] Step 206: If the target component corresponding to the target 3D building model to be destroyed is monitored, before the target component is destroyed, the related objects of the target 3D building model in the Three.js are traversed, and the life cycle management function beforedestoryed() of the Three.js is called to destroy the related objects layer by layer.

[0083] Specifically, the lifecycle hook function of the Vue is called to traverse the related objects of the target three-dimensional building model, and the lifecycle management function of the Three.js is called to destroy the related objects layer by layer.

[0084] Step 208: Unbinding the listeners of keyboard events, mouse events and custom events bound to the target three-dimensional building model; and destroying the target component in the Vue.

[0085] Step 210: Rendering the animation in the front-end page using the request animation frame interface, wherein the request animation frame interface is used to instruct the front-end page to cyclically call back a specified callback function to update the animation.

[0086] Step 212: When the target component is destroyed in the Vue, the loop callback is canceled using the cancel animation frame interface to clear the animation.

[0087] The above is a schematic scheme of a data processing method for page update of this embodiment. It should be noted that the technical scheme of the data processing method for page update and the technical scheme of the data processing method for page update described above belong to the same concept, and the details of the technical scheme of the data processing method for page update that are not described in detail can all be referred to the description of the technical scheme of the data processing method for page update described above.

[0088] Corresponding to the above method embodiment, this specification also provides a data processing device embodiment for page update, Figure 3 FIG. 1 is a schematic diagram showing a structure of a data processing device for page update provided by an embodiment of the present specification. Figure 3 As shown, the device comprises:

[0089] The management module 302 is configured to store the three-dimensional model of the front-end page in Vuex of Vue, and manage the three-dimensional model using the state management mechanism of Vuex;

[0090] An updating module 304 is configured to monitor the three-dimensional model through the Vue, and update the front-end page in response to the update of the three-dimensional model;

[0091] The destruction module 306 is configured to call Three.js to destroy the related objects of the target 3D model layer by layer before the target component is destroyed if the target component corresponding to the target 3D model to be destroyed is monitored, wherein the target component is the component in the Vue that manages the target 3D model.

[0092] The updating module 304 is further configured to monitor the update of the three-dimensional model through the monitoring function of the Vue, and update the front-end page based on the return value of the monitoring function.

[0093] The destruction module 306 is further configured to traverse the related objects of the target three-dimensional model in the Three.js before the target component is destroyed, and call the life cycle management function of the Three.js to destroy the related objects layer by layer.

[0094] The destruction module 306 is further configured to call the lifecycle hook function of the Vue, traverse the related objects of the target three-dimensional model, and call the lifecycle management function of the Three.js to destroy the related objects layer by layer.

[0095] The device also includes:

[0096] An unbinding module is configured to unbind the listener bound to the target three-dimensional model; and destroy the target component in the Vue.

[0097] The rendering module is configured to render the animation in the front-end page using a request animation frame interface, wherein the request animation frame interface is used to instruct the front-end page to cyclically call back a specified callback function to update the animation.

[0098] The clearing module is configured to cancel the loop callback and clear the animation by using the cancel animation frame interface when the target component is destroyed in the Vue.

[0099] The above is a schematic scheme of a data processing device for page update of this embodiment. It should be noted that the technical scheme of the data processing device for page update and the technical scheme of the data processing method for page update are of the same concept, and the details not described in detail in the technical scheme of the data processing device for page update can be referred to the description of the technical scheme of the data processing method for page update.

[0100] Figure 4 The block diagram of a computing device 400 according to one embodiment of the present specification is shown. The components of the computing device 400 include but are not limited to a memory 410 and a processor 420. The processor 420 is connected to the memory 410 via a bus 430, and the database 450 is used to store data.

[0101] The computing device 400 also includes an access device 440 that enables the computing device 400 to communicate via one or more networks 460. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 440 may include one or more of any type of network interface (e.g., a network interface card (NIC)) that is wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a world-wide interoperability for microwave access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, and a near field communication (NFC).

[0102] In one embodiment of the present specification, the above components of the computing device 400 and Figure 4 Other components not shown in the figure may also be connected to each other, for example, via a bus. It should be understood that Figure 4 The computing device structure block diagram shown is only for the purpose of illustration, and is not intended to limit the scope of this specification. Those skilled in the art can add or replace other components as needed.

[0103] The computing device 400 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook, etc.), a mobile phone (e.g., a smart phone), a wearable computing device (e.g., a smart watch, smart glasses, etc.), or other types of mobile devices, or a stationary computing device such as a desktop computer or a personal computer (PC). The computing device 400 may also be a mobile or stationary server.

[0104] The processor 420 is used to execute the following computer executable instructions, which, when executed by the processor, implement the steps of the data processing method for page update.

[0105] The above is a schematic scheme of a computing device of this embodiment. It should be noted that the technical scheme of the computing device and the technical scheme of the data processing method for page update described above are of the same concept, and the details not described in detail in the technical scheme of the computing device can be found in the description of the technical scheme of the data processing method for page update described above.

[0106] An embodiment of the present specification further provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the steps of the data processing method for page update.

[0107] The above is a schematic scheme of a computer-readable storage medium of this embodiment. It should be noted that the technical scheme of the storage medium and the technical scheme of the data processing method for page update described above belong to the same concept, and the details not described in detail in the technical scheme of the storage medium can be found in the description of the technical scheme of the data processing method for page update described above.

[0108] An embodiment of the present specification further provides a computer program, wherein when the computer program is executed in a computer, the computer is caused to execute the steps of the data processing method for page update.

[0109] The above is a schematic scheme of a computer program of this embodiment. It should be noted that the technical scheme of the computer program and the technical scheme of the data processing method for page update described above are of the same concept, and the details not described in detail in the technical scheme of the computer program can be found in the description of the technical scheme of the data processing method for page update described above.

[0110] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0111] The computer instructions include computer program codes, which may be in source code form, object code form, executable files or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of patent practice. For example, in some regions, according to patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0112] It should be noted that, for the above-mentioned method embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the embodiments of this specification are not limited by the order of the actions described, because according to the embodiments of this specification, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the embodiments of this specification.

[0113] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0114] The preferred embodiments of this specification disclosed above are only used to help explain this specification. The optional embodiments do not describe all the details in detail, nor do they limit the invention to only the specific implementation methods described. Obviously, many modifications and changes can be made according to the content of the embodiments of this specification. This specification selects and specifically describes these embodiments in order to better explain the principles and practical applications of the embodiments of this specification, so that technicians in the relevant technical field can well understand and use this specification. This specification is only limited by the claims and their full scope and equivalents.

Claims

1. A data processing method for page update, characterized in that: The method comprises: The three-dimensional model of the front-end page is stored in Vuex of Vue, and the three-dimensional model is managed by using the state management mechanism of Vuex; The three-dimensional model is monitored by the Vue, and the front-end page is updated in response to the update of the three-dimensional model, wherein the three-dimensional model is placed in the computed property of the Vue, and the computed property is a responsive dependency property; If the target component corresponding to the target 3D model to be destroyed is monitored, Three.js is called to destroy the related objects of the target 3D model layer by layer before the target component is destroyed, wherein the target component is the component in the Vue that manages the target 3D model. If the target component corresponding to the target 3D model to be destroyed is monitored, Three.js is called to destroy the related objects of the target 3D model layer by layer before the target component is destroyed, including: traversing the objects in the scene in beforeDestroy() of Vue and calling the dispose() method to destroy the related objects of the target 3D model; calling destroyed() to destroy the target component, traversing the related objects in the scene, and calling the dispose() method to destroy the related objects of the target 3D model.

2. The data processing method for page update according to claim 1, characterized in that: The monitoring the three-dimensional model through the Vue and updating the front-end page in response to the update of the three-dimensional model includes: The update of the three-dimensional model is monitored through the monitoring function of the Vue, and the front-end page is updated based on the return value of the monitoring function.

3. The data processing method for page update according to claim 1, characterized in that: The calling of Three.js to destroy the related objects of the target three-dimensional model layer by layer before the target component is destroyed includes: Before the target component is destroyed, the related objects of the target three-dimensional model in the Three.js are traversed, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

4. The data processing method for page update according to claim 3, characterized in that: The traversing the related objects of the target three-dimensional model in the Three.js and calling the life cycle management function of the Three.js to destroy the related objects layer by layer includes: The life cycle hook function of the Vue is called to traverse the related objects of the target three-dimensional model, and the life cycle management function of the Three.js is called to destroy the related objects layer by layer.

5. The data processing method for page update according to claim 1, characterized in that: After calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before destroying the target component, the method further includes: Unbinding the listener bound to the target three-dimensional model; Destroy the target component in the Vue.

6. The data processing method for page update according to claim 1, characterized in that: The method further comprises: The animation is rendered in the front-end page using a request animation frame interface, wherein the request animation frame interface is used to instruct the front-end page to cyclically call back a specified callback function to update the animation.

7. The data processing method for page update according to claim 6, characterized in that: After calling Three.js to destroy the related objects of the target three-dimensional model layer by layer before destroying the target component, the method further includes: When the target component is destroyed in the Vue, the loop callback is canceled using the cancel animation frame interface to clear the animation.

8. A data processing device for page update, characterized in that: include: A management module is configured to store the three-dimensional model of the front-end page in Vuex of Vue, and manage the three-dimensional model using the state management mechanism of Vuex; An update module is configured to monitor the three-dimensional model through the Vue, and update the front-end page in response to the update of the three-dimensional model, wherein the three-dimensional model is placed in the computed property of the Vue, and the computed property is a responsive dependency property; A destruction module is configured to, if a target component corresponding to a target 3D model to be destroyed is monitored, call Three.js to destroy related objects of the target 3D model layer by layer before the target component is destroyed, wherein the target component is a component in the Vue that manages the target 3D model. If a target component corresponding to the target 3D model to be destroyed is monitored, call Three.js to destroy related objects of the target 3D model layer by layer before the target component is destroyed, including: traversing objects in the scene in beforeDestroy() of Vue and calling a dispose() method to destroy related objects of the target 3D model; calling destroyed() to destroy the target component, traversing related objects in the scene, and calling a dispose() method to destroy related objects of the target 3D model.

9. A computing device, characterized in that include: Memory and processor; The memory is used to store computer executable instructions, and the processor is used to execute the computer executable instructions. When the computer executable instructions are executed by the processor, the steps of the data processing method for page update described in any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that: It stores computer executable instructions, which, when executed by a processor, can implement the steps of the data processing method for page update described in any one of claims 1 to 7.

Images