Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve Vue.js responsive data, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Basic concept side effect function

What is a side effect function? As its name suggests, a side effect function refers to a function that has side effects. What are the side effects? That is, it will have an impact on other parts outside the scope of the function. As the saying goes: medicine is one-third of poison, can cure disease, but also can cause disease. Medicine has side effects, and so is the side effect function.

An example of a side effect function code is as follows:

When the effect function executes, it sets the text content of the body, which directly or indirectly affects the execution of any other function that depends on the text content of the body. This is a simple side effect function.

Responsive data

As far as I understand it, the more straightforward term than "responsive data" should be "side-effect data". Just as the execution of a side-effect function may affect other things outside the scope of the function, changes to "side-effect data" may directly or indirectly affect all functions that rely on that data.

An example of a false response data code is as follows:

As shown in the figure above, assuming that every time you change the value of the text attribute of the object obj, it triggers the re-execution of the function effect, then the object obj can be said to be responsive data. Of course, in this example, the data response to the obj object is not actually implemented.

The basic realization idea of responsive data

If you look closely at the above examples, you may find that there are two key points in the implementation of responsive data:

The execution of the side effect function effect will trigger the read operation of the field obj.text.

The modification of the obj.textvalue of responsive data triggers the setting operation of the field obj.text

The thread of things gradually becomes clear: if we can intercept the reading and setting operation of the object obj and associate it with the object obj when the side effect function effect reads the value of the field obj.text for the first time, then every time we reset the value of the field obj.text, the effect function will be called again, wouldn't it be easy to respond to the obj object?

Preliminary realization attempt

With the idea of implementation, the most critical problem now is: how to intercept the reading and setting of an object property. If you are familiar with JavaScript, you may think of Object.defineProperty functions and Proxy object proxies. Yes, both of these schemes can intercept the reading and setting of an object property. In fact, using the Object.defineProperty function to implement the data response is the method used in Vue.js 2, while the Proxy object proxy is the method used in Vue.js 3.

Next, let's follow the above idea and implement it with proxy:

This is the simple implementation of the data response using the Proxy proxy object, you can create a side effect function effect to test. Of course, considering the complex and changeable environment, there is still a lot of room for improvement in the data correspondence at this time, so let's work overtime and give a relatively perfect responsive data implementation scheme as much as possible.

Perfect response system generalization side effect function name

If one day, the function name of the side effect is no longer called effect. Instead, it is called effect1 or effect2, and even the side effect function does not have a straightforward name and becomes an anonymous function, so the above response system scheme obviously does not work. At this point, in order to meet the demand, we need to provide a mechanism for registering the side effect function to achieve the effect of generalizing the side effect function name.

An example of code to register a side effect function name is as follows:

In this way, even an anonymous function can be successfully registered as a side effect function by registering as follows:

Of course, the read operation of intercepting data also needs to be slightly adjusted at this time:

Fix loophole

In many cases, debug is the biggest headache, especially when you know that there is bug, but you can't find a solution to repair it. It really feels like you're in prison.

Now let's consider an extreme condition: what happens if an attribute that doesn't already exist is added to the responsive data object obj? If you are not familiar with the previous content, you can go back to the code. You will find an amazing fact: adding an attribute that does not already exist to the responsive data object obj will establish a response relationship between the newly added attribute and the related side effect function. Calm down and think about it. In fact, the root cause of the problem is that there is no clear link between the side effect function and the target field being manipulated. So, how to solve it?

If you think about it, is there a structure in the data structure that has an one-to-one correspondence? Yes, of course, the mapping is. Following this line of thinking, can we use mapping to establish the relationship between the target field and the side effect function key-value? Yes, of course! Then we can first declare the variable bucket that is responsible for storing the function as a mapping Map to store responsive data (key)-the side effect function (value) related to all the attributes of the responsive data, where Map stores the responsive object properties and the corresponding set of side effects functions, so that a clear relationship is established. Before we start optimizing the response code, let's think again: would it be better for bucket to use WeakMap than Map? Let me be honest, of course you should use WeakMap, because the key of WeakMap is a weak reference, will not affect the work of the garbage collector, and will be recycled at the right time, so it is more appropriate to use it here.

The specific implementation code is as follows:

These are all the contents of the article "how to achieve Vue.js responsive data". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.