A two-way binding method and related device of Vue
The two-way binding method in Vue addresses the failure to update pages due to unmonitored changes in newly added attributes by implementing data monitoring, hijacking, and subscription centers, ensuring effective page updates.
Patent Information
- Application Number
- CN202011509270.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2020-12-18
- Publication Date
- 2024-12-10
- Estimated Expiration
- 2040-12-18
AI Technical Summary
The MVVM framework in Vue fails to monitor changes in the content of newly added attributes, leading to two-way binding failures, as Vue cannot update the page accordingly when new attributes are added to an initialized instance.
A two-way binding method is implemented in Vue, where a preset set method adds data monitoring, hijacking, and subscription centers for newly added attributes, enabling the listener to send changed content to the subscription center, which then updates the page through a service object.
This method ensures that Vue can monitor and update the page based on changes in newly added attributes, resolving the issue of two-way binding failures.
Smart Images
Figure CN112527294B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of software processing, and in particular to a two-way binding method of Vue and related devices. Background Art
[0002] In the MVVM framework, View (view) and Model (data) cannot communicate directly. There is a ViewModel (vue) between them as an observer. When the user operates the View (view), the ViewModel senses the change and then notifies the Model (data) to change accordingly; conversely, when the Model changes, the ViewModel can also sense the change and update the View accordingly. This back-and-forth process is the vue two-way binding.
[0003] The benefits of the MVVM framework are obvious: when the front-end changes the data (Model), the data can be persisted through Ajax requests, and only the changed part in the Vue DOM needs to be changed without refreshing the entire page. In other words, the page only needs to be updated for the changed data.
[0004] However, after the initialization instance generates an object, if a new attribute is added to the object, Vue cannot monitor the changes in the content of the newly added attribute, so the problem of two-way binding failure occurs. That is, when the content of the newly added attribute changes, Vue cannot perceive it, and thus, the View cannot be updated accordingly. Summary of the invention
[0005] The present application provides a two-way binding method and related devices for Vue, which aims to solve the problem that when adding attributes to an object generated by an initialized instance, the page cannot be updated due to the inability to monitor changes in the content of the newly added attributes.
[0006] In order to achieve the above objectives, this application provides the following technical solutions:
[0007] This application provides a Vue two-way binding method, applied to Vue, including:
[0008] In the case of receiving an instruction for representing a newly added attribute to a target object, calling a preset set method; the set method adds data monitoring, data hijacking and subscription center for the newly added attribute in the vue;
[0009] If the newly added attribute is an attribute used for rendering a page, then the listener of the target object sends the changed content to the subscription center of the newly added attribute when monitoring the content change of the newly added attribute;
[0010] The subscription center of the newly added attribute sends the changed content to the service object of the subscription center in the vue;
[0011] The service object updates the page according to the changed content.
[0012] Optionally, the subscription center of the newly added attribute includes: a trigger time; the trigger time is used to indicate: when the listener of the target object listens to the content change of the newly added attribute, the change content of the newly added attribute is sent to the subscription center of the newly added attribute;
[0013] When the listener of the target object detects a change in the content of the newly added attribute, the listener sends the changed content to the subscription center of the newly added attribute, including:
[0014] When the listener of the target object monitors the content change of the newly added attribute, the listener sends the changed content to the subscription center of the newly added attribute according to the trigger time.
[0015] Optionally, the process of adding data monitoring, data hijacking and subscription center for the newly added attribute in the vue by the set method includes:
[0016] In the case that the target object has a listener, the listener of the target object traverses each attribute of the target object and takes the attributes to which data monitoring and data hijacking are not added as the newly added attributes;
[0017] Add data monitoring and data hijacking to the newly added attributes;
[0018] Add a subscription center for the newly added attribute.
[0019] Optionally, also include:
[0020] If no listener exists for the target object, create a listener for the target object in the vue.
[0021] The present application also provides a vue two-way binding device, including:
[0022] A calling module, used to call a preset set method when receiving an instruction for representing a newly added attribute to a target object; the set method adds data monitoring, data hijacking and subscription center for the newly added attribute in the vue;
[0023] A first sending module is used for sending the changed content to a subscription center of the newly added attribute through a listener of the target object when a content change of the newly added attribute is detected if the newly added attribute is an attribute used for rendering a page;
[0024] The second sending module is used to send the changed content to the service object of the subscription center in the vue through the subscription center of the newly added attribute;
[0025] An updating module is used to update the page according to the changed content through the service object.
[0026] Optionally, the subscription center of the newly added attribute includes: a trigger time; the trigger time is used to indicate: when the listener of the target object listens to the content change of the newly added attribute, the change content of the newly added attribute is sent to the subscription center of the newly added attribute;
[0027] The first sending module is used to send the changed content to the subscription center of the newly added attribute when the listener of the target object monitors the content change of the newly added attribute, including:
[0028] The first sending module is specifically configured to send the changed content to the subscription center of the newly added attribute according to the trigger time when the listener of the target object monitors the content change of the newly added attribute.
[0029] Optionally, it also includes: an execution module, used to add data monitoring, data hijacking and subscription center for the newly added attribute in the vue through the set method;
[0030] The execution module is used to add data monitoring, data hijacking and subscription center for the newly added attribute in the vue through the set method, including:
[0031] The execution module is specifically used to traverse each attribute of the target object through the listener of the target object when a listener exists on the target object, and take the attributes to which data monitoring and data hijacking are not added as the newly added attributes; add data monitoring and data hijacking to the newly added attributes; and add a subscription center to the newly added attributes.
[0032] Optionally, the execution module is further used to create a listener for the target object in the vue through the set method if no listener exists for the target object.
[0033] The present application also provides a storage medium, which includes a stored program, wherein the program executes any one of the above-mentioned Vue two-way binding methods.
[0034] The present application also provides a device, comprising at least one processor, and at least one memory and a bus connected to the processor; wherein the processor and the memory communicate with each other through the bus; the processor is used to call program instructions in the memory to execute any of the above-mentioned Vue two-way binding methods.
[0035] The two-way binding method and device of Vue described in the present application call a preset set method when receiving an instruction for representing a newly added attribute to a target object; because the set method can add data monitoring, data hijacking and subscription center for the newly added attribute, when the content of the newly added attribute changes, the listener of the target object in Vue can monitor the change of the content of the newly added attribute.
[0036] Furthermore, if the newly added attribute is an attribute used to render the page, the listener of the target object will send the changed content to the subscription center of the newly added attribute when it detects the change of the content of the newly added attribute; the subscription center of the newly added attribute will send the changed content to the service object of the subscription center in Vue; the service object will update the page according to the changed content. Thus, the change of the content of the newly added attribute can be monitored, and the page can be updated according to the monitored changed content.
[0037] In summary, the present application can solve the problem in the prior art that when adding attributes to an object generated by an initialization instance, the page cannot be updated due to the inability to monitor changes in the content of the newly added attributes. BRIEF DESCRIPTION OF THE DRAWINGS
[0038] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.
[0039] Figure 1 A flowchart of a two-way binding method of Vue disclosed in an embodiment of the present application;
[0040] Figure 2 A schematic diagram of the process of monitoring the content of the newly added attributes of the target object and updating the page disclosed in the embodiment of the present application;
[0041] FIG3( a ) is a schematic diagram of code for adding attributes to a “test object” according to an embodiment of the present application;
[0042] FIG3( b ) is a schematic diagram of the printing result of the “test object” disclosed in the embodiment of the present application;
[0043] FIG3( c ) is a schematic diagram of the expansion result of the target object “observer” disclosed in the embodiment of the present application;
[0044] FIG3( d ) is a schematic diagram of source code content of a subscription center added for attribute “k3” disclosed in an embodiment of the present application;
[0045] Figure 4 This is a schematic diagram of the structure of the bidirectional binding device of Vue disclosed in the embodiment of the present application;
[0046] Figure 5 A schematic diagram of the structure of a device disclosed in an embodiment of the present application. DETAILED DESCRIPTION
[0047] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.
[0048] The applicant found in the research that the fundamental reason for the failure of two-way binding in Vue is: for the instance of the data object stored in Vue, in the process of initializing the instance, Vue performs data monitoring and data hijacking (ie getter / setter) conversion on the attributes defined in the instance. Among them, the changes in the content of the attributes after the data monitoring and data hijacking conversion will be monitored by Vue, and then, Vue can update the page according to the monitored change data. That is, before the instance is initialized, the attributes defined in the instance can be converted by Vue into responsive attributes (converted into attributes with data monitoring and data hijacking). After the object is obtained by initializing the instance, Vue can allow new attributes to be added for the object, but it is not allowed to dynamically add new responsive attributes for the object. In addition, for the newly added attributes, Vue cannot monitor the changes in the content of the newly added attributes, which leads to the failure of two-way binding.
[0049] The applicant further discovered that, when initializing an object generated by an instance, if a new attribute is added to the object, the fundamental reason why Vue cannot monitor changes in the content of the newly added attribute is that there is no data monitoring, data hijacking, or subscription center for the newly added attribute, which makes Vue unable to monitor changes in the content of the newly added attribute, and thus, unable to update the page accordingly, that is, the two-way binding fails.
[0050] In an embodiment of the present application, when new attributes and instructions for assigning values to the new attributes are received, the preset set method is called, so that the set method adds data monitoring, data hijacking, and subscription centers for each new attribute, respectively. After the added subscription center takes effect, Vue can monitor changes in the content of the new attributes, and update the View according to the changed content, thereby solving the problem of failure of two-way binding of the new attributes.
[0051] Figure 1 The Vue two-way binding method provided in the embodiment of the present application, the execution subject is Vue, and can include the following steps:
[0052] S101: When receiving an instruction for adding a new attribute to a target object, calling a preset set method.
[0053] In this embodiment, the target object refers to: the object to be added with new attributes in the object generated by the initialization instance. In practice, the target object can be determined according to the actual situation. In this step, the instruction includes information about the target object.
[0054] In this embodiment, the newly added attribute of the target object may be a root-level attribute newly added to the target object, or may be a subordinate attribute newly added to any attribute of the target object.
[0055] In this embodiment, the set method adds data monitoring, data hijacking, and the execution process of the subscription center to the newly added attribute, which may include steps A1 to A8:
[0056] A1. Determine whether the target object has a listener. If not, execute A2. If yes, execute A3.
[0057] In this embodiment, the object obtained by initializing the instance should have a listener. Therefore, in this step, it is determined whether the target object has a listener.
[0058] A2. Create a listener for the target object.
[0059] After completing this step, proceed to step A3.
[0060] A3. The listener of the target object traverses each attribute of the target object and adds attributes that have not been added with data monitoring and data hijacking as new attributes.
[0061] A4. Add data monitoring and data hijacking to the newly added attributes.
[0062] A5. Add a subscription center for the newly added attributes.
[0063] A6. After all the newly added properties of the target object have been added with data hijacking, call the dep.notify() method.
[0064] In this embodiment, the dep.notify() method stores the trigger time of each attribute, wherein the trigger time of any attribute refers to the time when the content of the attribute changes and the changed content of the attribute is sent to the subscription center of the attribute (subscription observer mode).
[0065] S102: When the listener of the target object detects a change in the content of the newly added attribute, the listener sends the changed content of the newly added attribute to a subscription center of the newly added attribute.
[0066] Optionally, in this step, when the listener of the target object detects a change in the content of the newly added attribute, the listener sends the content of the newly added attribute to the subscription center of the newly added attribute at the triggering time of the subscription center of the newly added attribute.
[0067] S103: The subscription center of the newly added attribute sends the changed content of the newly added attribute to the service object of the subscription center.
[0068] S104: The service object updates the page according to the changed content of the newly added attribute.
[0069] In practice, after adding data monitoring, data hijacking, and subscription center to the new attributes of the target object, Vue monitors the content changes of the new attributes of the target object and updates the page according to the changed content, such as Figure 2 shown.
[0070] exist Figure 2 In the example, "Observer" means the listener of the target object, which can be translated as "publisher", "Dep" means the subscription center, "Watcher" means the service object of the subscription center, "View" means the page, and "Compile" means the compilation and parsing process, including the parser.
[0071] The listener of the target object is used to hijack and listen to all the properties of the target object. If the content of any property changes, the changed content of the property is sent to the subscription center of the property. The subscription center of the property sends the changed content to the Watcher, and the Watcher updates the page according to the changed content.
[0072] exist Figure 2In the compilation and parsing process, the parser, optimizer and code generator are included. The parser is the first part of the entire compilation, and its main function is to convert the project into an abstract syntax tree (AST); the optimizer marks the static nodes of the abstract syntax tree to optimize the rendering process. The code generator generates a render function string function based on the AST. The compilation and parsing process is bound to the Watcher. The update function refers to: a string function that updates the render function. The update function can be simply regarded as a special calculation function. When the Watcher object changes, the render function is updated, and then a new virutal-dom structure is generated, which is then handed over to Vue for comparison and view update.
[0073] The initialization process between the compilation and parsing process and the "View" means: when the page is generated, the variable objects are assigned default values, the controls are set to the default state, but no other operations are performed on the page (such as requests, jumps, etc.).
[0074] In order to more intuitively demonstrate the specific process of Vue two-way binding implemented in the embodiment of the present application, in this process, the target object is introduced by taking the "test object" as an example. Figure 3 (a) is a code schematic diagram of adding a new attribute to the "test object".
[0075] In Figure 3(a), the code above "mounted()" is when the instance is initialized, and the "test object" in the instance has two attributes "k1" and "k2". The code starting from "mounted()" and the following part indicate the addition of the attribute "k3", and the value of the newly added attribute "k3" is "3". That is, when the instance is initialized to generate the "test object", the two attributes "k1" and "k2" are added to the "test object", and after the initialization is completed, a new attribute "k3" is added.
[0076] After adding the attribute "k3", the "test object" is printed, and the printing result is shown in Figure 3(b). From Figure 3(b), the "—ob—" in the second line indicates the listener of the "test object".
[0077] In this embodiment, the set method is called to determine whether there is a listener for the "test object". If not, a new listener is added for monitoring. If it exists, the listener of the "test object" traverses the properties of the "test object" to determine whether data monitoring and data hijacking have been added to each property.
[0078] Expand "observer" in Figure 3(b) to get the expanded result as shown in Figure 3(c). As can be seen from Figure 3(c), among the three attributes of the "test object", "k1" and "k2" have data monitoring and data hijacking (i.e. getter and setter), while "k3" has a value but no data monitoring and data hijacking. Therefore, if "test.k3" is used in the rendering part of the page, the two-way binding failure problem will occur.
[0079] Therefore, the set method adds data monitoring and data hijacking to the attribute "k3". And adds a subscription center to the attribute "k3". In this embodiment, the subscription center can also be regarded as an event center, and all monitoring is stored in the subscription center. In addition, each subscription center has a corresponding ID, which represents a unique subscription center self-incrementing identifier.
[0080] In this embodiment, the source code content of the subscription center added for the attribute "k3" is shown in Figure 3(d). It can be seen from Figure 3(d) that there are methods such as "addSubremove", "Subdep end" and "notify" in the subscription center source code, which are used to operate corresponding monitoring, adding, deleting, finding corresponding dependencies, notifying, etc.
[0081] After adding data monitoring and data hijacking to all properties of the "test object", call the dep.notify() method, which stores the trigger time of each property. The trigger time of any property means: after the content of the property changes, the time when the changed content of the property is sent to the subscription center of the property (subscription observer mode).
[0082] After adding a subscription center for the attribute "k3", the listener of the "test object" can monitor the changes in the content of the "k3" attribute, and then update the page according to the monitored changes. Specifically, the process of monitoring the changes in the content of the "k3" attribute and updating the page according to the changed content is as follows: Figure 2 As shown. That is, when the listener of the target object monitors the change of the content of the "k3" attribute, at the trigger time of the "k3" attribute, the monitored change content is sent to the subscription center of the "k3" attribute, and the subscription center sends the change content to the Watcher, and the Watcher updates the page according to the change content.
[0083] Figure 4 A bidirectional binding device of Vue provided in an embodiment of the present application may include: a calling module 401, a first sending module 402, a second sending module 403 and an updating module 404.
[0084] The calling module 401 is used to call a preset set method when receiving an instruction for representing a newly added attribute to a target object; the set method adds data monitoring, data hijacking and subscription center for the newly added attribute in the vue;
[0085] The first sending module 402 is configured to send the changed content to a subscription center of the newly added attribute through the listener of the target object when a content change of the newly added attribute is detected if the newly added attribute is an attribute used for rendering a page;
[0086] The second sending module 403 is used to send the changed content to the service object of the subscription center in the vue through the subscription center of the newly added attribute;
[0087] The updating module 404 is used to update the page according to the changed content through the service object.
[0088] Optionally, the subscription center of the newly added attribute includes: a trigger time; the trigger time is used to indicate: when the listener of the target object listens to the content change of the newly added attribute, the change content of the newly added attribute is sent to the subscription center of the newly added attribute;
[0089] The first sending module 402 is used to send the changed content to the subscription center of the newly added attribute when the listener of the target object monitors the content change of the newly added attribute, including:
[0090] The first sending module 402 is specifically configured to send the changed content to the subscription center of the newly added attribute according to the trigger time when the listener of the target object monitors the content change of the newly added attribute.
[0091] Optionally, the device may further include: an execution module, configured to add data monitoring, data hijacking and a subscription center for the newly added attribute in the vue through the set method;
[0092] The execution module is used to add data monitoring, data hijacking and subscription center for the newly added attribute in the vue through the set method, including:
[0093] The execution module is specifically used to traverse each attribute of the target object through the listener of the target object when a listener exists on the target object, and take the attributes to which data monitoring and data hijacking are not added as the newly added attributes; add data monitoring and data hijacking to the newly added attributes; and add a subscription center to the newly added attributes.
[0094] Optionally, the execution module is further used to create a listener for the target object in the vue through the set method if no listener exists for the target object.
[0095] The Vue two-way binding device includes a processor and a memory. The above-mentioned calling module 401, the first sending module 402, the second sending module 403 and the updating module 404 are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize corresponding functions.
[0096] The processor includes a kernel, which calls the corresponding program unit from the memory. The kernel can be set to one or more, and the kernel parameters can be adjusted to solve the problem that the page cannot be updated due to the inability to monitor the changes in the content of the newly added attributes when adding attributes to the objects generated by the initialization instance.
[0097] An embodiment of the present invention provides a storage medium on which a program is stored. When the program is executed by a processor, the Vue two-way binding method is implemented.
[0098] An embodiment of the present invention provides a processor, which is used to run a program, wherein the Vue two-way binding method is executed when the program is running.
[0099] An embodiment of the present invention provides a device, such as Figure 5 As shown, the device includes at least one processor, at least one memory connected to the processor, and a bus; wherein the processor and the memory communicate with each other through the bus; the processor is used to call the program instructions in the memory to execute the above-mentioned vue two-way binding method. The device in this article can be a server, PC, PAD, mobile phone, etc.
[0100] The present application also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program for initializing the following method steps:
[0101] In the case of receiving an instruction for representing a newly added attribute to a target object, calling a preset set method; the set method adds data monitoring, data hijacking and subscription center for the newly added attribute in the vue;
[0102] If the newly added attribute is an attribute used for rendering a page, then the listener of the target object sends the changed content to the subscription center of the newly added attribute when monitoring the content change of the newly added attribute;
[0103] The subscription center of the newly added attribute sends the changed content to the service object of the subscription center in the vue;
[0104] The service object updates the page according to the changed content.
[0105] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0106] In a typical configuration, the device includes one or more processors (CPU), memory and bus. The device may also include input / output interface, network interface and the like.
[0107] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip. The memory is an example of a computer-readable medium.
[0108] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.
[0109] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.
[0110] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.
[0111] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.
[0112] If the functions described in the method of the embodiment of the present application are implemented in the form of software functional units and sold or used as independent products, they can be stored in a storage medium readable by a computing device. Based on this understanding, the part of the embodiment of the present application that contributes to the prior art or the part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions to enable a computing device (which can be a personal computer, server, mobile computing device or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program code.
[0113] The features described in the various embodiments of this specification can be replaced or combined with each other. Each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referenced to each other.
[0114] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.
Claims
1. A vue two-way binding method, It is characterized in that Applied to vue, including: In the case of receiving an instruction for representing a newly added attribute to a target object, calling a preset set method; the set method adds data monitoring, data hijacking and subscription center for the newly added attribute in the vue; If the newly added attribute is an attribute used for rendering a page, then the listener of the target object sends the changed content to the subscription center of the newly added attribute when monitoring the content change of the newly added attribute; The subscription center of the newly added attribute sends the changed content to the service object of the subscription center in the vue; The service object updates the page according to the changed content; The process of adding data monitoring, data hijacking and subscription center for the newly added attribute in the Vue by the set method includes: when a listener exists on the target object, the listener of the target object traverses each attribute of the target object, and takes the attributes to which data monitoring and data hijacking are not added as the newly added attributes; adding data monitoring and data hijacking to the newly added attributes; adding a subscription center to the newly added attributes, and after data hijacking has been added to all the newly added attributes of the target object, calling the dep.notify() method, in which the trigger time of each attribute is stored.
2. The method according to claim 1, It is characterized in that The subscription center of the newly added attribute includes: a trigger time; the trigger time is used to indicate: when the listener of the target object listens to the content change of the newly added attribute, the change content of the newly added attribute is sent to the subscription center of the newly added attribute; When the listener of the target object detects a change in the content of the newly added attribute, the listener sends the changed content to the subscription center of the newly added attribute, including: When the listener of the target object detects a change in the content of the newly added attribute, the listener sends the changed content to the subscription center of the newly added attribute according to the trigger time.
3. The method according to claim 1, It is characterized in that Also includes: If no listener exists for the target object, create a listener for the target object in the vue.
4. A vue two-way binding device, It is characterized in that include: A calling module, used for calling a preset set method when receiving an instruction for representing a newly added attribute to a target object; The set method adds data monitoring, data hijacking and subscription center for the newly added attributes in the vue; A first sending module is used for sending the changed content to a subscription center of the newly added attribute through a listener of the target object when a content change of the newly added attribute is detected if the newly added attribute is an attribute used for rendering a page; The second sending module is used to send the changed content to the service object of the subscription center in the vue through the subscription center of the newly added attribute; An updating module, used to update the page according to the changed content through the service object; An execution module, used for adding data monitoring, data hijacking and subscription center for the newly added attribute in the vue through the set method; The execution module is used to add data monitoring, data hijacking and subscription center for the newly added attribute in the vue through the set method, including: the execution module is specifically used to traverse each attribute of the target object through the listener of the target object when the target object has a listener, and use the attribute without adding data monitoring and data hijacking as the newly added attribute; Add data monitoring and data hijacking to the newly added attributes; add a subscription center to the newly added attributes, and after all newly added attributes of the target object have been added with data hijacking, call the dep.notify() method, in which the trigger time of each attribute is stored.
5. The device according to claim 4, It is characterized in that The subscription center of the newly added attribute includes: a trigger time; the trigger time is used to indicate: when the listener of the target object listens to the content change of the newly added attribute, the change content of the newly added attribute is sent to the subscription center of the newly added attribute; The first sending module is used to send the changed content to the subscription center of the newly added attribute when the listener of the target object monitors the content change of the newly added attribute, including: The first sending module is specifically configured to send the changed content to the subscription center of the newly added attribute according to the trigger time when the listener of the target object monitors the content change of the newly added attribute.
6. The device according to claim 4, It is characterized in that The execution module is also used to create a listener for the target object in the vue through the set method when no listener exists for the target object.
7. A storage medium, It is characterized in that The storage medium includes a stored program, wherein the program executes the Vue two-way binding method described in any one of claims 1 to 3.
8. A device, It is characterized in that The device includes at least one processor, and at least one memory and a bus connected to the processor; wherein the processor and the memory communicate with each other through the bus; the processor is used to call program instructions in the memory to execute the Vue two-way binding method as described in any one of claims 1 to 3.