Vue’s data-binding system made the most sense to me when I viewed it as a pseudo getter-setter mechanism. Here are a few notes that I made when working through Max Schwarzmuller’s Vue course (which is really fantastic, btw):
*Vue does “proxying” of properties, computed properties and methods.
*Vue then sets up watchers for them.
*We can access them from outside of the instance by directly accessing them on whatever we stored the instance.
*We cannot add new proxied properties (since they are created via the constructor), or we can but they won’t work as normal properties that we pass into the data property or as methods when we created the Vue instance.
In theory you are not creating this Vue instance - you are calling it via the constructor, but this appears to be a core object shipped with the Vue framework. Behind the scenes, when creating an instance, Vue takes the object you pass and takes your data properties or methods and use them as native properties on the Vue instance object itself, so it will copy them.
It sets up a kind of watcher for each of those properties, which makes sure it recognizes whenever one of those properties is changed, so it knows when to update the DOM, or when to do anything.
Very different from React, but still pretty slick!
