How Vue.js, React.js, Angular.js work

Question

This is some kind of question from curiossity.

The question arises:

How does this client framework work, let me explain.

I have been working with javascript for over 5 years. And I don’t understand anything. How do they know when the value of a variable changes (for example, title) ???.

I would do it like this:

function onTitleChange(title) { //do some stuff }
let title = "This is some title"
let lastTitle = title;
setInterval(() => {
    if(lastTitle !== title) {
        onTitleChange(title);
        lastTitle = title
    }
}, 10);

Is that how they all work? Is this how Vue.js knows when a variable's value changes? If not, what kind of magic do they use to know when a variable's value changes?

Answer 1

I will try to explain this in simple words, step by step:

• make an element <h2>Hi</h2>on a simple HTML page
• DOM : var h2 = document.getElemntsByTagName('h2')[0];

• var obj = {}; var text = '';

  , :

• obj.text = text getter setter obj.text , , obj.text, DOM.

  Object.defineProperty(obj, 'text', {
      get: function () {
          return text;
      },
      set: function (newvalue) {
          text = newvalue;
          h2.innerHTML = text;
      }
  });
  

• obj.text: obj.text = "Hello again"

.

: JSfiddle

Answer 2

, Angular, , zone.js, .

Answer 3

A little bit about the reactor - in fact, it does not listen to changes in js objects, because of this, it only calls those rendercomponent methods if shouldComponentUpdate()(by default, reference equality of the state of the component is used) return true, and check if the VirtualDOMreal DOM is true.

Because of this, it is much faster than Angular, which many listeners and equality checks use to view updates.