Reactive behaviour

Reactive behavior in libraries like React Angular Vue.js simply explained

by soorena

HTML

<h2>
Hi
</h2>

JavaScript

var h2 = document.getElementsByTagName('h2')[0];
var obj = {};
var text = '';

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

// uncomment this part and re-run this page:
//obj.text = "Hello Again";