“This is the second day of my participation in the Gwen Challenge.

responsive

When we use Excel, when the input value (width, height) changes, the output value (size) will automatically change.

This situation is a good example of responsiveness. According to the official vUE documentation:

Responsiveness is a programming paradigm that allows us to adapt to change in a declarative way.

This is not the case when we write JavaScript code, and it is not simply reactive, as shown below:

let width = 4
let height = 5
let size = width * height

// size
/ / 20

width = 5

// size
/ / 20

height = 6

// size
/ / 20
Copy the code

When changing width or height, size is not automatically recalculated. Some mechanism is needed to implement responsiveness.

If we set size = width * height as a function, it would be nice to tell our code to execute the function again when width or height changes.

If we think further, we find that there are the following problems:

  • How do you sense a change in value
  • What function to perform when the value changes, size or circumference
  • How do I tell the function to execute when the value changes

Next, let’s look at the simplest one. When the value changes, we manually trigger the function to get the latest size.

Manual trigger

Start by declaring a function effect that calculates the area

let param = { width: 4.height: 5 };
let size = 0;

let effect = () = > {
    size = param.width * param.height
}

track();
effect();

Copy the code

It can be seen that one track function is not implemented. As the name implies, this function is used for tracking. When the value changes, we just need to trigger the corresponding effect.

let dep = new Set(a)// a list of effect-like functions

function track() {
  dep.add(effect) // Store the current EFFCT
}

function trigger() { 
  dep.forEach(effect= > effect()) // Execute all effects
}

Copy the code

The final code example is as follows:

let param = { width: 4.height: 5 };
let size = 0;

let effect = () = > {
    size = param.width * param.height
}

let dep = new Set(a)// a list of effect-like functions

function track() {
  dep.add(effect) // Store the current EFFCT
}

function trigger() { 
  dep.forEach(effect= > effect()) // Execute all effects
}

track(); // Add trace

effect();
console.log(size); / / = > 20

param.width = 5;
trigger(); // Manually triggered
console.log(size); / / = > 25

param.width = 6;
trigger(); // Manually triggered
console.log(size); / / = > 30

Copy the code

Bigo, a dumb version of the responsive implementation.

Ponder or wonder.

Weak and weak, I now have two thoughts:

  • Each value change needs to be done manuallytrigger, too weak chicken, why can’t automatic execution
  • When the application is more complex, for example:
    • Param has N fields, some fields need a response, some fields do not need a response.
    • What if there are multiple param-like objects that need to respond? Is a Set too simple

There is a long way to go.

In the next Part, we can learn “Exploring the Principle of Vue3 Responsiveness Part 2 – Responsiveness of Multiple Structures”.