This is how I understand reactive systems in Vue

When IT comes to knowledge, especially complex concepts, I find it hard to accept if I can’t make analogies. . After reading the Vue source code analysis of Daishen Emo, I would like to share my analogy of Vue responsive system, you have to read his article (at least to see his Vue responsive system).

This is my own idea, may suit you, may not suit you, but also hope more advice. There is no code for this article.

Before that, think of it as resident Evil.

Here’s how I understand the principle of responsive systems in VUE:

New Vue({options}), just like the world in Resident Evil, the data in the Vue is like every creature that has inevitable contact with the world (whether you are Alice, Bereaved history, or bereaved dog) as long as you interact with the world, You are influenced by a large group within Vue called the Umbrella Corporation (the counterpart of the Observer in Vue source code),

It can observe all living things. Umbrella monitors region-wide organisms (making them observable) through its global base “Underground LABS in the Nevada Desert” (corresponding to Define Active in Vue).

The specific operator of this base is “Dr. Isaac” (corresponding to Object.definePrototy in Vue). The object.definePrototy method has three arguments (let’s say three), the input parameter is an obj (it’s an individual creature, like Alice), the second parameter key is like Alice’s skill point — whether she uses a gun or a Turkish saber — and the third parameter vaule is the value of the skill point. Dr. Isaac changes each of the subjects (they’re zombies, Alice clones, and even Alice herself, but they’re all Data).

Dr. Isaac (Object.definePrototy) via reactiveGetter for every data (creature, zombie…) Gene reading (this process includes “dependency collection” in Vue).

Write each data via reactiveSetter (like genetic modification, like the clone that transformed Alice in Resident Evil 3). When reactiveGetter is used, it is very important to rely on data collection (this is why data in Vue changes, so does its View layer).

How is this important maintained? First, dependency collection lets’ observable ‘data know,’ There’s a place to rely on my data, let them know when I change ‘. This is where the “Red Queen” enters the scene. She can monitor every creature’s information (using powerful AI technology), and she is like the subscriber Dep in Vue.

The Red Queen is able to provide all the information to the umbrella company’s top interest groups (like Watcher in Vue).

But first she needs to know who is at the top (just as the Subscriber Dep has a function called addSub to store Watcher observer objects). The Red Queen notifies the Watcher that the object view is about to be updated when it learns that the dependent collection object has changed its data.