Vue.js reactivity system explained
One of the powerful features of Vue is its reactivity system. It is an unobtrusive way to detect changes to the components model. A component model is just a plain JavaScript object. When it changes, Vue detects the changes and updates the corresponding views. In Vuex, the single state tree is reactive, like the data part of a Vue component.
It is important to understand how the reactivity system works to avoid some common mistakes.
There are two ways to detect whether a value inside a JavaScript object has changed:
- By using the
Proxyfeature, which is defined in ECMAScript 2015 (6th Edition, ECMA-262) - By using
Object.defineProperty, which is defined in ECMAScript 2011 (5.1 Edition, ECMA-262)
For compatibility reasons, Vue decided to use Object.defineProperty, which means that there are some limitations.
When you create a component, Vue will walk through all the properties of the data part and use Object.defineProperty to convert them into getter/setter methods...
