Reactive data properties

Another one of Vue's initialization steps is to walk through all of the data properties and assign them getters and setters. If you look in the following screenshot, you can see how each property in our current app has agetandsetfunction added to it:

Figure 2.9. Getters and setters

Vue added these getters and setters to enable it to perform dependency tracking and change notification when the properties are accessed or modified. So, when thecontractedvalueis changed by theclickevent, itsset method is triggered. Thesetmethod will set the new value, but will also carry out a secondary task of informing Vue that a value has changed and any part of the page relying on it may need to be re-rendered.

If you'd like to know more about Vue's reactivity system, check out the articleReactivity In Vue.js (And Its Pitfalls) athttps://vuejsdevelopers.com/2017/03/05/vue-js-reactivity/.