1. Reactive ​

Intro ​

Reactive system are one of the most important part in Vue.js. In this section, we will discuss what reactive data and the effect function are, and attempt to implement a relatively complete reactive system. During this process, we will encounter various questions, such as how to avoid infinite recursion and why nesting effect functions is necessary, What effects will arise between two effect functions, and what other questions should we consider. Next, we will delve into the topic of reactive data. We are already aware that vue3 utilizes the Proxy to achive reactive data, which involves language specification knowledge.This section covers achieving data object proxy in accordance with language specifications and explores other important details. Next, we start by understanding reactive data, effect funcitons, and gradually delve into comcepet of reactive system.

1.1 Reactive Data And Effect Functions ​

Effect funtions are functions that produce effects, as shown in the following code:

function effect() {
  document.body.innerText = "hello vue3";
}

function effect() {
  document.body.innerText = "hello vue3";
}

While the effect function is running, it changes the body's text content, and this behavior is not exclusive to the effect function, other functions can also achieve the same result. It means that effect function can directly or indirectly affect other functions when it runs, in such cases, we can say that the effect function produces an effect. Effect functions are created quite easily. For instance, a function that modifies a global variable is, in fact, an effect function. as shown in the following code:

// global variable
let val = 1;

function effect() {
  val = 2; // modifies the global variable, produces an effect
}

// global variable
let val = 1;

function effect() {
  val = 2; // modifies the global variable, produces an effect
}

We already know what effect functions are, Now, let's talk about what reactive data is. Suppose we are reading a property from an effect function:

const obj = { text: "hello, world" };

function effect() {
  document.bidy.innerTest = obj.text;
}

const obj = { text: "hello, world" };

function effect() {
  document.bidy.innerTest = obj.text;
}

As shown in the code above, the effect function modifies the innerText property of the body element with a value from obj.text. When obj.text changes, we expect the function to be re-executed.

For instance, if we change the obj.text using the code obj.text = 'hello, vue3', we expect the effect function to be re-executed automatically. If this behavior is achieved, then we can consider obj as reactive data. But up to this point, we can't achieve that because obj is a regualr JavaScript object. It only updates its own vlaues but dosen't trigger any other effects. Next, we will discuss how to make data reactive.

1.2 Baisc Reactive Data Implamentation ​

In the previous section, we already discussed two traits of reactive data:

• Running the effect fuction triggers the reading action of obj.text

• Changing the value of obj.text triggers the setting action of obj.text

If we can intercept the reading and setting actions of an object, then we can implement the traits mentioned above. We can save the effect function into a Bucket, as shown in the Image 1-1:

Immediately after that, we takeout the effect function from the bucket and run it when we set obj.text, as shown in Image 1-2: