title: How does Vue.js reactivity work under the hood?
body: <p>Basically, when I have a component, let’s call it “TransportComponenet.vue”, and in that component, I have a data() and My properties are carId, transportId. What vue does is makes getters and setters for these properties. Let’s say in this componenet’s view, I type <code>{{carId + transportId}}</code> and also <code>{{carId * transportId}}</code>. </p>
  
  <p>As far As I know, Vue comes to my views, looks at them, and wherever I have getters ( <code>{{carId+ transportId}}</code> or <code>{{carId * transportId}}</code> ) are getters. So vue comes and registers them in component’s watcher. When I somewhere use setters such as <code>this.carId = 5</code>. Vue does the setter function for this property and reevalutes the functions (getters) that were saved before in the watcher. Is this the correct assumption?</p>
  
  <p>What I don’t get is what relationship does exist between Dep class and Watcher class ? I know they both play the big role. I’d really honor the whole explanation “which thing goes where and when and why”.</p>